@charset "UTF-8";
/*------------------------------------------------------------
  margin-bottom / margin-top / padding-top / padding-bottom 計算
------------------------------------------------------------*/
/*------------------------------------------------------------
  タイトル ＋ テキスト ラインハイトが異なる部分の余白計算 計算
------------------------------------------------------------*/
/* 
それぞれ( )内にpxでの数値を入れるとrem, px, vw(pc版), vw(sp版) に変換 
*/
/* 
それぞれ( )内にpxでの数値を入れるとrem, px, vw(pc版), vw(sp版) に変換 
*/
.line-frame__title {
  margin-top: 5rem;
}
@media screen and (max-width: 896px) {
  .line-frame__title {
    margin-top: 3.5rem;
  }
}

.line-frame__title-text {
  color: #646464;
  font-size: 3rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
.line-frame__title-text .is-yellow {
  color: #dda013;
}
@media screen and (max-width: 896px) {
  .line-frame__title-text {
    font-size: 2rem;
  }
}

.line-frame__image {
  padding-right: 0;
}
@media screen and (max-width: 896px) {
  .line-frame__image {
    margin-top: 3rem;
  }
}

.housing {
  margin-top: 10rem;
}
@media screen and (max-width: 896px) {
  .housing {
    margin-top: 5rem;
  }
}

.housing__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3rem;
}
@media screen and (max-width: 896px) {
  .housing__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.housing__image {
  width: calc(50% - 1.5rem);
}
@media screen and (max-width: 896px) {
  .housing__image {
    width: 100%;
  }
}

.housing__text {
  width: calc(50% - 1.5rem);
}
@media screen and (max-width: 896px) {
  .housing__text {
    width: 100%;
  }
}

.gallery__content {
  padding-right: 0;
}

.gallery__title-text {
  font-weight: 300;
  color: #dda013;
  text-align: right;
}

.gallery__list {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 896px) {
  .gallery__list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.gallery__image-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  position: relative;
}
.gallery__image-wrap.js-modal-open {
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .gallery__image-wrap.js-modal-open:hover {
    opacity: 0.7;
  }
}
.gallery__image-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  background: url(../img/your-rosa/refurbishment/tryangle.png) no-repeat center center/contain;
}
@media screen and (max-width: 896px) {
  .gallery__image-wrap::before {
    width: 3rem;
    height: 3rem;
  }
}

.gallery__item-text {
  padding: 1rem;
}