@media (max-width: 1024px) {
  .room {
    overflow-x: hidden; } }
.room-top {
  position: relative;
  margin-bottom: 384px; }
  @media (max-width: 1024px) {
    .room-top {
      margin-bottom: 100px; } }
  .room-top::before {
    content: "";
    width: 70%;
    height: 100%;
    background-color: #F7F3E7;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1; }
    @media (max-width: 1024px) {
      .room-top::before {
        height: 70%; } }
.room-inner {
  display: flex; }
  @media (max-width: 1024px) {
    .room-inner {
      flex-direction: column; } }
.room-left {
  width: 50vw;
  height: 529px;
  overflow: hidden;
  position: relative;
  top: 100px;
  left: calc(50% - 50vw); }
  @media (max-width: 1024px) {
    .room-left {
      order: 2;
      width: 100%;
      height: 300px;
      top: 0;
      left: inherit; } }
  @media (max-width: 599px) {
    .room-left {
      height: 200px; } }
.room-right {
  width: 50vw;
  margin-top: auto;
  margin-bottom: auto; }
  @media (max-width: 1024px) {
    .room-right {
      order: 1;
      width: 100%;
      padding-top: 60px; } }
  @media (max-width: 1024px) {
    .room-right__inner {
      margin-bottom: 40px; } }
.room-heading {
  margin-bottom: 20px;
  font-weight: 100; }
  @media (max-width: 1024px) {
    .room-heading {
      text-align: left;
      order: 4; } }
.room-txt {
  width: 90%; }
  @media (max-width: 1024px) {
    .room-txt {
      width: 100%;
      order: 5; } }
.room-img {
  width: 100%;
  height: 100%;
  object-fit: cover; }
  @media (max-width: 1024px) {
    .room-img {
      width: 100%;
      height: 100%; } }
.room-content {
  position: relative;
  margin-bottom: 90px; }
  @media (max-width: 1024px) {
    .room-content {
      padding-bottom: 100px; } }
  .room-content::before {
    content: "";
    position: absolute;
    width: 70%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #F7F3E7;
    z-index: -1; }
    @media (max-width: 1024px) {
      .room-content::before {
        height: 70%;
        bottom: 0;
        top: inherit; } }
  .room-content__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
    @media (max-width: 1024px) {
      .room-content__inner {
        flex-direction: column; } }
  .room-content__left {
    width: 50%; }
    @media (max-width: 1024px) {
      .room-content__left {
        display: contents;
        width: 100%; } }
    .room-content__left--img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
      .room-content__left--img-wrap {
        position: absolute;
        bottom: -280px;
        margin-left: calc(50% - 50vw);
        width: 40vw;
        height: 466px;
        overflow: hidden;
        backface-visibility: hidden; }
        @media (max-width: 1024px) {
          .room-content__left--img-wrap {
            display: none; } }
    @media (max-width: 1024px) {
      .room-content__left--inner {
        display: contents; } }
  .room-content__right {
    margin-left: auto;
    margin-right: calc(50% - 50vw);
    width: calc(50vw - 60px);
    height: 599px;
    overflow: hidden;
    backface-visibility: hidden;
    display: block;
    position: relative;
    top: -140px; }
    @media (max-width: 1024px) {
      .room-content__right {
        width: 100%;
        height: 300px;
        order: 3;
        position: inherit;
        top: inherit;
        overflow: inherit;
        margin-bottom: 40px;
        margin-right: inherit; } }
    @media (max-width: 599px) {
      .room-content__right {
        height: 200px; } }
  .room-content__img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .room-content__reverse {
    margin-bottom: 240px; }
    @media (max-width: 1024px) {
      .room-content__reverse {
        margin-bottom: 90px; } }
    @media (max-width: 599px) {
      .room-content__reverse {
        margin-bottom: 70px; } }
    .room-content__reverse::before {
      left: inherit;
      right: 0; }
    .room-content__reverse .room-content__left {
      order: 2; }
    .room-content__reverse .room-content__right {
      order: 1;
      margin-left: calc(50% - 50vw);
      top: 140px; }
      @media (max-width: 1024px) {
        .room-content__reverse .room-content__right {
          top: inherit;
          margin-left: inherit; } }
    @media (max-width: 1024px) {
      .room-content__reverse .room-content__img {
        width: 100%; } }
    .room-content__reverse .room-ttl {
      left: inherit;
      right: 10%; }
      .room-content__reverse .room-ttl__tp {
        top: -233px; }
    .room-content__reverse .room-ttl__en {
      right: 0; }
  .room-content__mb500 {
    margin-bottom: 500px; }
    @media (max-width: 1024px) {
      .room-content__mb500 {
        margin-bottom: 80px; } }
  .room-content__res {
    margin-bottom: 420px; }
    @media (max-width: 1024px) {
      .room-content__res {
        margin-bottom: 90px; } }
.room-ttl {
  position: absolute;
  font-size: 3.0rem;
  top: -60px;
  left: 10%;
  letter-spacing: 14px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; }
  @media (max-width: 1024px) {
    .room-ttl {
      order: 2;
      -ms-writing-mode: inherit;
      writing-mode: inherit;
      top: -24px;
      left: inherit;
      position: relative;
      font-size: 2.0rem; } }
  .room-ttl__tp {
    top: -140px; }
    @media (max-width: 1024px) {
      .room-ttl__tp {
        position: relative;
        top: -24px; } }
  .room-ttl__en {
    left: inherit;
    font-size: 6.0rem;
    top: -140px; }
    @media (max-width: 1024px) {
      .room-ttl__en {
        order: 1;
        font-size: 3.0rem; } }
    .room-ttl__en--tp {
      top: -280px; }
      @media (max-width: 1024px) {
        .room-ttl__en--tp {
          top: inherit; } }