@charset "UTF-8";
/* CSS Document */
.wrapper {
  display: block;
  padding-top: 50px;
  padding-bottom: 100px;
  background-color: #eee;
}
.contents {
  line-height: 2;
  background-color: #fff;
  width: 90vw;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  box-shadow:
    5px -5px 10px rgba(0, 0, 0, 0.1), -5px 5px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.img-box {
  width: 100%;
   aspect-ratio:16/9;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.img-box2 {
  width: 100%;
  aspect-ratio:16/9;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.img-box3 {
  width: 100%;
  height: 50vh;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.img-box4 {
  width: 100%;
  aspect-ratio:16/9;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.img-box5 {
  width: 100%;
  aspect-ratio:16/9;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.img-box6{
	 width: 100%;
  aspect-ratio:16/9;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.img-box7{
	 width: 100%;
  aspect-ratio:16/9;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.img-box8{
	 width: 100%;
  aspect-ratio:16/9;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.img-box9{
	 width: 100%;
  aspect-ratio:16/9;
  background-image: url("../images/reservation/hotel-single-sp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  margin-top: 20px;
}
.information-area {
  background-color: #eee;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
}
.information {
  display: flex;
  flex-wrap: wrap;
  width: 90%
}
.information div {
  display: flex;
  align-items: center;
}
.information div img {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}
.information div p {
  margin-right: 20px;
}
.first-area {
  border-bottom: 1px solid #000;
  padding-bottom: 10px
}
.second-area {
  margin-top: 20px;
}
.second-title h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.attention {
  margin-top: 20px;
  background-color: #eee;
  border-radius: 10px;
  width: 100%;
  padding: 10px;
}
.attention ul {
  list-style: disc;
  padding-left: 20px;
}
.modal-open {
  text-decoration: underline;
  color: blue;
}
.modal-open p {
  margin-top: 10px;
}
.sard-area {
  margin-top: 20px;
}
.prime {
  display: flex;
  align-items: center;
  background-color: #b8d200;
  width: fit-content;
  padding: 5px;
  border-radius: 15px;
  margin-top: 10px;
}
.prime img {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.price-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
  margin-top: 10px;
}
.price {
  color: #ee7800
}

.del {

position: relative;

}

.del:after {

content: '';

display: block;

width: 100%;

height: 2px;

margin-top: -2px;

border-top: solid 2px #f00000;

position: absolute;

left: 0;

top: 50%;

}



.amount {
  font-size: 24px;
}
.login-button {
  color: #ee7800;
  border: 1px solid #ee7800;
  width: 50%;
  text-align: center;
  line-height: 3;
  border-radius: 5px;
}
.login-button:hover {
  color: #000;
  background-color: #ee7800;
}
.reserve-button {
  border: 1px solid #000;
  width: 50%;
  text-align: center;
  line-height: 3;
  border-radius: 5px;
}
.reserve-button:hover {
  opacity: .5;
}
#info {
  display: none;
}
#info2 {
  display: none;
}
#info3 {
  display: none;
}
#info4 {
  display: none;
}
/*モーダルの横幅を変更したい場合*/
.modaal-container {
  max-width: 600px;
}
/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, .modaal-close:before {
  background: #ccc;
}
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background: #666;
}
@media(min-width:990px) {
  .detail1 {
    display: flex;
  }
  .detail2 {
    display: flex;
    border-bottom: 1px solid #000;
  }
  .first-area {
    width: 30vw;
    padding: 20px;
  }
  .second-area {
    width: 30vw;
    padding: 20px;
  }
  .sard-area {
    width: 30vw;
    padding: 20px;
  }
  .price-area:last-child {
    border-bottom: none
  }
}