@charset "utf-8";

/* 
--------------------------------------------------
ホテル詳細
--------------------------------------------------
*/
.main--contents > div {
  border-bottom: solid 1px rgb(34, 24, 20, 0.1);
}
.hotel--detail {
  margin-bottom: 10vw;
}
.hotel--detail .hotel--name {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hotel--detail .hotel--name img {
  width: 80%;
  padding: 7vw 0;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}
.hotel--detail .hotel--name p {
  font-size: 7vw;
  margin-bottom: 7vw;
}
.hotel--detail .hotel--name a {
  font-size: 3.5vw;
  width: 70%;
  padding: 3vw 0;
  margin-bottom: 9vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  background: #333;
  border: solid 1px #333;
  transition: all 0.3s;
}
.hotel--detail .hotel--name a:hover {
  color: #333;
  background: #fff;
  border: solid 1px #333;
}
.hotel--detail .hotel--name a::after {
  content: "";
  width: 2.5vw;
  height: 2.5vw;
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: auto;
  right: 4vw;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: rotate(-45deg);
}
.hotel--detail　.hotel--name a:hover::after {
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
}
.hotel--detail table {
  width: 95%;
  margin: 0 auto 2vw;
}
.hotel--detail tr {
  display: flex;
}
.hotel--detail td {
  display: block;
  line-height: 1.5;
  margin-bottom: 2vw;
}
.hotel--detail td:first-child {
  width: 30%;
  color: #186cae;
}
.hotel--detail td:last-child {
  width: 65%;
  margin-left: 5%;
}
/* ホテルMAP */
.hotel--map {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  margin-bottom: 20vw;
  overflow: hidden;
}
.hotel--map iframe,
.hotel--map object,
.hotel--map embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 560px) {
  .main--contents > div {
    margin-top: 110px;
    padding-bottom: 30px;
  }
  .hotel--detail {
    display: flex;
    align-items: flex-start;
    margin: 60px 0 5vw;
  }
  .hotel--detail .hotel--name {
    width: 33.3%;
  }
  .hotel--detail .hotel--name img {
    width: 80%;
    padding: 0 0 4vw;
  }
  .hotel--detail .hotel--name p {
    font-size: 2.5vw;
    margin-bottom: 4vw;
  }
  .hotel--detail .hotel--name a {
    font-size: 2vw;
    width: 70%;
    padding: 1.8vw 0;
    margin-bottom: 9vw;
  }
  .hotel--detail .hotel--name a::after {
    right: 2.5vw;
    width: 1vw;
    height: 1vw;
  }
  .hotel--detail .hotel--name a:hover::after {
    border-right: solid 1px #333;
    border-bottom: solid 1px #333;
  }
  .hotel--detail table {
    width: 62.6%;
    margin: 0 auto 0 4%;
  }
  .hotel--detail td {
    font-size: 1.8vw;
  }
  /* ホテルMAP */
  .hotel--map {
    padding-bottom: 40.25%;
    margin-bottom: 8vw;
  }
}

@media screen and (min-width: 1000px) {
  .hotel--detail {
    margin: 60px 0 80px;
  }
  .hotel--detail .hotel--name {
    width: 33.3%;
  }
  .hotel--detail .hotel--name img {
    width: 90%;
    padding: 0 0 40px;
  }
  .hotel--detail .hotel--name p {
    font-size: 21px;
    margin-bottom: 40px;
  }
  .hotel--detail .hotel--name a {
    font-size: 14px;
    width: 250px;
    padding: 12px 0;
    margin-bottom: 0;
  }
  .hotel--detail .hotel--name a::after {
    right: 40px;
    width: 7px;
    height: 7px;
  }
  .hotel--detail table {
    width: 62.6%;
    margin: 0 auto 0 4%;
  }
  .hotel--detail td {
    font-size: 16px;
    margin-bottom: 30px;
  }
  /* ホテルMAP */
  .hotel--map {
    padding-bottom: 395px;
    margin-bottom: 80px;
  }
}