@charset "UTF-8";
/******************************************************************************/
@import url(base.css);

/* ==========================================================================
	h1 タイトル
========================================================================== */
.room-mv{
  position: relative;
}
.room-mv span{
  display: block;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(51,51,51,0.7);
  color: #fff;
  padding: 8px 30px;
  font-weight: normal;
  font-size: var(--fz45);
  white-space: nowrap;
}
.room-mv img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .room-mv{
  aspect-ratio: 3 / 4;
  overflow: hidden;
  }
}

/* ==========================================================================
	コンテンツ共通
========================================================================== */
.room h2{
  font-size: clamp(20px, 2.3vw, 32px);
  margin-bottom:var(--spacing-30);
  text-align: center;
}


/* ==========================================================================
	concept
========================================================================== */
#concept{
  width: 100%;
  text-align: center;
  background:#f3f2ef;
  padding:var(--spacing-70) 0;
 }
.concept__inner{
  width: min(1100px, 94%);
  margin: 0 auto;
}
.concept__inner p{
  font-size: var(--fz17);
  line-height: 1.7;
  margin: var(--spacing-50) 0;
  text-align: center;
}
.concept__plan{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap:20px;
}
.concept__plan figcaption{
  text-align: left;
  font-size: var(--fz18);
}
.concept__plan-floor2{
  display: flex;
  flex-direction: column;
  gap:20px;
}
.concept__plan-floor2 li{
  font-size: var(--fz14);
  text-align: left;
  position: relative;
  padding-left: 1.2em;
}
.concept__plan-floor2 li::before {
  content: "○";
  position: absolute;
  left: 0;
  top: 0;
}
/******/
@media screen and (max-width: 767px) {
  .concept__inner p{
    text-align: left;
  }
  .concept__plan{
    flex-direction: column;
  }
  .concept__plan-floor2 figure{
    width: min(225px, 40%);
  }
  .concept__plan-floor2{
    flex-direction: row;
    align-items:flex-start;
    justify-content: center;
  }

}


/* ==========================================================================
	comfort
========================================================================== */
#comfort{
  background: url("../img/top/ryoon_bg.jpg") top left/cover repeat;
  padding:var(--spacing-70) 0;
}
.comfort__inner{
  width: min(1100px, 94%);
  margin: 0 auto;
}
.comfort__content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top:var(--spacing-70);
}
.comfort__content>figure{
  height:100%;
}
.comfort__content>figure>img{
  height:100%;
  object-fit:cover;
}
.comfort__content div h3{
  font-size: var(--fz22);
  margin-bottom:var(--spacing-30);
}
.comfort__content div figure{
  width: min(160px, 30%);
  margin-bottom:var(--spacing-30);
  filter: drop-shadow(1px 1px 2px #999);
  -webkit-filter: drop-shadow(1px 1px 2px #999);
}
.comfort__content div p{
  line-height: 1.7;
}
/******/
@media screen and (max-width: 767px) {
  .comfort__content{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================================
	room-sec
========================================================================== */
.room-sec{
  padding:var(--spacing-70) 0;
}
#floor--1,#amenity{
  background: #f3f2ef;
}
#floor--2{
  background: #ebe7e3;
}
/***/
.room-sec__inner{
  width: min(1100px, 94%);
  margin: 0 auto;
  text-align: center;
}
.room-sec__inner>figure{
  position: relative;
}
.room-sec__inner>figure>span{
  position: absolute;
  left:2%;
  bottom:5%;
  color: #fff;
  font-size: var(--fz50);
  text-align: left;
}
.room-sec__inner>figure>span>span{
  font-size: var(--fz18);
}
#floor--1 .room-sec__inner>figure>span{
  width: clamp(90px, 30%, 190px);
}
p.room-sec__lead{
  font-size: var(--fz25);
  font-weight: bold;
  margin:var(--spacing-30) 0 var(--spacing-70); 
}
p.amenity__category{
  width: fit-content;
  margin:var(--spacing-70) auto var(--spacing-30);
  font-size: var(--fz18);
  padding:10px 10%;
  background: #fff;
  border: 1px solid #333;
  text-align: center;
}
p.amenity__note{
  font-size: var(--fz22);
  margin-top: var(--spacing-70);
}
.room-sec__list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
  text-align: left;
}
#amenity .room-sec__list{
   grid-template-columns: repeat(4, 1fr); 
}
.room-sec__list h3{
  margin: 5px 0;
}
.room-sec__list p{
  font-size: var(--fz15);
}
/******/
@media screen and (max-width: 767px) {
  .room-sec__inner>figure span>span{
    display: block;
  }
  .room-sec__list,#amenity .room-sec__list{
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
  }
}

/* ==========================================================================
	amenity-excluded
========================================================================== */
#amenity-excluded{
  background:#ebe7e3;
  padding:var(--spacing-70) 0;
}
.amenity-excluded__inner{
  width: min(1100px, 94%);
  margin: 0 auto;
  text-align: center;
}
.amenity-excluded__inner h2{
  width: fit-content;
  display:flex;
  align-items: center;
  border: #333 1px solid;
  background: #fff;
  margin:0 auto var(--spacing-30);
  font-size: var(--fz22); 
}
.amenity__attention-label{
  background: #333;
  color: #fff;
  padding: 10px 20px;
}
.amenity__attention-text{
  padding: 10px 20px;
}
.amenity-excluded__inner p{
  font-size: var(--fz18); 
  margin:0 auto var(--spacing-30);
}
.amenity-excluded__inner ul{
  display:inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px 40px;
}
/******/
@media screen and (max-width:767px) {
    .amenity-excluded__inner h2{
       align-items: stretch; 
    }
  .amenity__attention-label{
      display:flex;
      align-items:center; 
    }
    .amenity__attention-text{
      text-align: left;
    }
  .amenity-excluded__inner ul{
    gap:20px 0;
  }
}