/* =========================================================
   hotel Giraffe Nakasu - rooms.css (page-rooms.php 専用)
   ========================================================= */

.room-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

#rooms h2 {
   font-size: 48px;
   letter-spacing: 0.125em;
   margin-bottom: 60px;
   color: var(--color-gold);
   font-family: var(--font-serif);
   line-height: 1;
   font-weight: 500;
}
#rooms .label {
   display: block;
   color: var(--color-gold);
   font-family: var(--font-serif);
   font-size: 10px;
   line-height: 1;
   font-weight: 600;
}
#rooms .sparkles {
   width: 26px;
}
#rooms .sparkles img {
   width: 100%;
}
#rooms #section-reservations h2,
#rooms #section-reservations .label {
   color: #fff;
}
@media screen and (max-width: 768px) {
   #rooms h2 {
      font-size: 50px;
      margin-bottom: 50px;
   }
   #rooms .label {
      margin-bottom: 70px;
   }
}

#rooms-section {
   padding: 90px 0 130px 0;
   text-align: center;
   background-color: #fff;
}
#rooms #rooms-section h2 {
   position: relative;
   text-align: center;
   font-size: 50px;
   margin-bottom: 90px;
}
#rooms #rooms-section h2::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: -44px;
   width: 20px;
   height: 1px;
   background-color: var(--color-gold);
   transform: translateX(-50%);
}
#rooms-section .sparkles {
   margin: 0 auto;
}
#rooms-section h3 {
   font-size: 50px;
   font-weight: 500;
   margin-bottom: 45px;
}
#rooms #rooms-section .label {
   margin-bottom: 60px;
}
#rooms #rooms-section .sparkles {
   margin-bottom: 60px;
}
#rooms #rooms-section p {
   line-height: 1.8;
   margin-bottom: 65px;
}
#rooms-section .flex {
   justify-content: center;
   gap: 0;
}
#rooms-section .item {
   width: 24%;
   text-align: center;
   margin: 0 auto;
}
#rooms-section .item img {
   width: 100%;
   aspect-ratio: 3 / 2;
   background-color: var(--color-gray);
   margin-bottom: 20px;
}
#rooms-section .item h4 {
   color: var(--color-gold);
   font-size: 20px;
}

@media screen and (max-width: 768px) {
   #rooms-section {
      padding: 95px 0 245px 0;
   }
   #rooms-section h3 {
      margin-bottom: 40px;
      font-size: 46px;
   }
   #rooms #rooms-section .label {
      margin-bottom: 60px;
   }
   #rooms-section .flex {
      width: calc(100% + 80px);
      margin-left: -40px;
      flex-wrap: wrap;
      gap: 0;
   }
   #rooms-section .flex .item {
      width: 50%;
      margin-bottom: 40px;
      margin-right: 0;
      margin-left: 0;
   }
   #rooms-section .item h4 {
      font-size: 15px;
   }
}

#style-a {
   background-color: #FBFAF8;
}
#style-b {
   background-color: #F1F0EE;
}
#style-c {
   background-color: #F1F1E9;
}
#style-d {
   background-color: #ECE8DF;
}
.room-card {
   padding: 120px 0;
}
.room-card .sparkles {
   margin-bottom: 55px;
}
.room-card .room-head {
   margin-bottom: 75px;
}
.room-card .room-info {
   margin-bottom: 60px;
}
.room-card .flex {
   align-items: center;
}
.room-card .flex .description {
   width: 40%;
   line-height: 1.8;
   border-right: 1px solid var(--color-gold);
   padding-right: 7.5%;
}
.room-card ul {
   padding-left: 55px;
}
.room-card ul li.flex {
   display: grid;
   grid-template-columns: 34.5px 1fr;
   align-items: center;
   gap: 12px;
}
.room-card .flex .bed,
.room-card .flex .person,
.room-card .flex .area {
   justify-self: center;
}
.room-card .flex .bed {
   width: 34.5px;
   height: 20px;
}
.room-card .flex .person,
.room-card .flex .area {
   width: 19px;
}
.room-card ul li {
   margin-bottom: 20px;
}
.room-card .room-gallery {
   margin-bottom: 85px;
}
#rooms .carousel-btn {
   color: #fff;
}
.room-actions .btn {
   width: 300px;
}

@media screen and (max-width: 768px) {
   .room-card .sparkles {
      margin-bottom: 80px;
   }
   .room-card .flex {
      align-items: flex-start;
      flex-direction: column;
      gap: 0;
   }
   .room-card .flex .description {
      width: 100%;
      border-right: none;
      padding-right: 0;
      margin-bottom: 70px;
   }
   .room-card ul {
      padding-left: 0;
   }
}

#rooms #section-qa {
   background-color: #EEEDE8;
}