/* Scss Document */
/*
---------------------------------------
space01
---------------------------------------
*/
#space01 {
  position: relative;
  overflow: hidden;
  /*    &::before{
          content: '';
          position: absolute;
          left:0;
          bottom:0;
          z-index:-1;
          background:linear-gradient(to bottom,#fff 0%,#F7F7F7 100%);
          width:100%;
          height:50rem;
      }*/ }
  @media (max-width: 999px) {
    #space01 {
      margin-bottom: 6rem; } }
  #space01 .headBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10rem;
    margin-bottom: 11rem; }
    @media (max-width: 999px) {
      #space01 .headBox {
        display: block;
        margin-bottom: 3rem; } }
  @media (max-width: 999px) {
    #space01 .ttlBox {
      margin-bottom: 3rem; } }
  #space01 .ttl {
    font-size: 4.6rem; }
    @media (max-width: 999px) {
      #space01 .ttl {
        font-size: 2.4rem; } }
    #space01 .ttl span {
      display: block; }
  #space01 .mainPic {
    width: calc(100% - max(5.335vw,calc(50vw - 70rem)));
    height: auto;
    margin-left: max(5.335vw, calc(50vw - 70rem));
    aspect-ratio: 1660 / 640;
    overflow: hidden; }
    @media (max-width: 999px) {
      #space01 .mainPic {
        width: 94%;
        margin-left: auto;
        aspect-ratio: 375 / 230; } }
  #space01 .pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; }

/*
---------------------------------------
spaceNav
---------------------------------------
*/
#spaceNav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem; }
  @media (max-width: 999px) {
    #spaceNav {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 6rem; } }
  #spaceNav .floorLink {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 12rem;
    padding: 2rem 7rem 2rem 4rem;
    border: 1px solid rgba(51, 51, 51, 0.2);
    color: inherit;
    text-decoration: none;
    transition: all .3s; }
    @media (max-width: 999px) {
      #spaceNav .floorLink {
        min-height: 8rem;
        padding: 1.5rem 5rem 1.5rem 2rem; } }
    #spaceNav .floorLink:hover {
      border: 1px solid #333333;
      opacity: 1; }
  #spaceNav .floorLinkInner {
    display: flex;
    align-items: center; }
    @media (max-width: 999px) {
      #spaceNav .floorLinkInner {
        align-items: center; } }
  #spaceNav .floorTxt {
    line-height: 1.7; }
  #spaceNav .floorNum {
    display: flex;
    align-items: baseline;
    flex-shrink: 0;
    margin-right: 3.5rem;
    line-height: 1; }
    @media (max-width: 999px) {
      #spaceNav .floorNum {
        margin-right: 2rem; } }
    #spaceNav .floorNum .num {
      font-size: 5.4rem;
      font-weight: 300; }
      @media (max-width: 999px) {
        #spaceNav .floorNum .num {
          font-size: 3.8rem; } }
    #spaceNav .floorNum .unit {
      margin-left: .3rem;
      font-size: 2.4rem; }
      @media (max-width: 999px) {
        #spaceNav .floorNum .unit {
          font-size: 1.8rem; } }
  #spaceNav .arrow {
    position: absolute;
    top: 50%;
    right: 4rem;
    width: 1.2rem;
    height: 1.2rem;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: translateY(-70%) rotate(45deg);
    transition: border-color .3s; }
    @media (max-width: 999px) {
      #spaceNav .arrow {
        right: 2rem;
        width: 1rem;
        height: 1rem; } }

#space02,
#space03 {
  scroll-margin-top: 10rem; }
  @media (max-width: 999px) {
    #space02,
    #space03 {
      scroll-margin-top: 7rem; } }

/*
---------------------------------------
space02
---------------------------------------
*/
#space02 {
  --bg-inner-width:min(89.33vw,176rem);
  --bg-right:calc((100vw - var(--bg-inner-width)) / 2);
  position: relative;
  padding: clamp(10rem, 8vw, 16rem) 0 0;
  overflow: hidden;
  isolation: isolate; }
  @media (max-width: 999px) {
    #space02 {
      --bg-inner-width:89.33vw;
      --bg-right:5.335vw;
      padding: 5rem 0 0;
      margin-bottom: 6rem; } }
  #space02::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: calc(100% - var(--bg-right));
    height: 56%;
    background: #171717 url("../img/space/02_bg.jpg") center center/cover no-repeat;
    content: "";
    pointer-events: none; }
    @media (max-width: 999px) {
      #space02::before {
        width: 96%;
        height: 136vw;
        max-height: 70rem; } }
  #space02 .inner14 {
    width: 82%; }
  #space02 .floorHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-bottom: clamp(6rem, 6vw, 12rem); }
    @media (max-width: 999px) {
      #space02 .floorHead {
        display: block;
        min-height: 0;
        margin-bottom: 4rem; } }
  #space02 .floorInfo {
    color: #fff; }
    @media (max-width: 999px) {
      #space02 .floorInfo {
        padding: 0 0 2rem; } }
  #space02 .ttlBox {
    margin-bottom: 4rem; }
    @media (max-width: 999px) {
      #space02 .ttlBox {
        margin-bottom: 2rem; } }
  #space02 .floorTtl {
    display: flex;
    align-items: baseline;
    margin: 0;
    font-size: 4.8rem;
    line-height: 1; }
    @media (max-width: 999px) {
      #space02 .floorTtl {
        font-size: 2.2rem; } }
    #space02 .floorTtl .num {
      margin-right: .4rem;
      font-size: 8rem; }
      @media (max-width: 999px) {
        #space02 .floorTtl .num {
          font-size: 4.2rem; } }
  #space02 .floorEn {
    margin-top: 2rem;
    line-height: 1; }
    @media (max-width: 999px) {
      #space02 .floorEn {
        margin-top: 1.2rem;
        font-size: 1.2rem; } }
  #space02 .mapPic {
    width: calc(726 / 1400 * 100%);
    margin: 0;
    padding-bottom: 0rem;
    aspect-ratio: 726 / 445;
    overflow: hidden; }
    @media (max-width: 999px) {
      #space02 .mapPic {
        width: 100%;
        padding-bottom: 0;
        aspect-ratio: auto; } }
    #space02 .mapPic img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center; }
  #space02 .seatPics {
    display: grid;
    grid-template-columns: minmax(0, 38.5%) minmax(0, 1fr);
    align-items: start;
    gap: 1rem; }
    @media (max-width: 999px) {
      #space02 .seatPics {
        display: block; } }
  #space02 .seatPic {
    min-width: 0;
    margin: 0; }
    @media (max-width: 999px) {
      #space02 .seatPic:not(:last-child) {
        margin-bottom: 2rem; } }
  #space02 .picWrap {
    width: 100%;
    height: auto;
    overflow: hidden; }
  #space02 .counter .picWrap {
    aspect-ratio: 540 / 650; }
    @media (max-width: 999px) {
      #space02 .counter .picWrap {
        aspect-ratio: 300 / 200; } }
  #space02 .table .picWrap {
    aspect-ratio: 850 / 650; }
    @media (max-width: 999px) {
      #space02 .table .picWrap {
        aspect-ratio: 850 / 520;
        aspect-ratio: 300 / 200; } }
  #space02 .pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; }
  #space02 figcaption {
    margin-top: 2rem;
    font-size: 2rem; }
    @media (max-width: 999px) {
      #space02 figcaption {
        margin-top: 0.5rem;
        text-align: center;
        font-size: 1.4rem; } }

/*
---------------------------------------
space03
---------------------------------------
*/
#space03 {
  --bg-inner-width:min(89.33vw,176rem);
  --bg-left:calc((100vw - var(--bg-inner-width)) / 2);
  position: relative;
  padding: clamp(10rem, 8vw, 16rem) 0 0;
  overflow: hidden;
  isolation: isolate; }
  @media (max-width: 999px) {
    #space03 {
      --bg-inner-width:89.33vw;
      --bg-left:4vw;
      padding: 5rem 0 0;
      margin-bottom: 6rem; } }
  #space03::before {
    position: absolute;
    top: 0;
    right: 0;
    left: var(--bg-left);
    z-index: -1;
    height: 56%;
    background: #171717 url("../img/space/02_bg.jpg") center center/cover no-repeat;
    content: "";
    pointer-events: none; }
    @media (max-width: 999px) {
      #space03::before {
        left: 4%;
        height: 172vw;
        max-height: 88rem; } }
  #space03 .inner14 {
    width: 82%; }
  #space03 .floorHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-bottom: clamp(6rem, 6vw, 10rem); }
    @media (max-width: 999px) {
      #space03 .floorHead {
        display: block;
        min-height: 0;
        margin-bottom: 4rem; } }
  #space03 .floorInfo {
    color: #fff; }
    @media (max-width: 999px) {
      #space03 .floorInfo {
        padding: 0 0 2rem; } }
  #space03 .ttlBox {
    margin-bottom: 4rem; }
    @media (max-width: 999px) {
      #space03 .ttlBox {
        margin-bottom: 2rem; } }
  #space03 .floorTtl {
    display: flex;
    align-items: baseline;
    margin: 0;
    font-size: 4.8rem;
    line-height: 1; }
    @media (max-width: 999px) {
      #space03 .floorTtl {
        font-size: 2.2rem; } }
    #space03 .floorTtl .num {
      margin-right: .4rem;
      font-size: 8rem; }
      @media (max-width: 999px) {
        #space03 .floorTtl .num {
          font-size: 4.2rem; } }
  #space03 .floorEn {
    margin-top: 2rem;
    line-height: 1; }
    @media (max-width: 999px) {
      #space03 .floorEn {
        margin-top: 1.2rem;
        font-size: 1.2rem; } }
  #space03 .mapPic {
    width: calc(726 / 1400 * 100%);
    margin: 0;
    aspect-ratio: 726 / 445;
    overflow: hidden; }
    @media (max-width: 999px) {
      #space03 .mapPic {
        width: 100%;
        aspect-ratio: auto; } }
    #space03 .mapPic img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center; }
  #space03 .roomHead {
    margin-bottom: 4rem;
    color: #fff;
    text-align: center; }
    @media (max-width: 999px) {
      #space03 .roomHead {
        margin-bottom: 2rem; } }
  #space03 .roomType {
    margin-bottom: 1rem;
    font-size: 2.6rem; }
    @media (max-width: 999px) {
      #space03 .roomType {
        font-size: 1.4rem;
        margin-bottom: 0.5rem; } }
  #space03 .roomTtl {
    margin: 0;
    font-size: 3.8rem; }
    @media (max-width: 999px) {
      #space03 .roomTtl {
        font-size: 2rem; } }
  #space03 .roomPics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem; }
    @media (max-width: 999px) {
      #space03 .roomPics {
        display: block; } }
  #space03 .roomPic {
    min-width: 0;
    margin: 0; }
    @media (max-width: 999px) {
      #space03 .roomPic:not(:last-child) {
        margin-bottom: 1rem; } }
    #space03 .roomPic .picWrap {
      aspect-ratio: 850 / 650; }
      @media (max-width: 999px) {
        #space03 .roomPic .picWrap {
          aspect-ratio: 300 / 200; } }
    #space03 .roomPic .picWrap:nth-child(2) {
      aspect-ratio: 540 / 650; }
      @media (max-width: 999px) {
        #space03 .roomPic .picWrap:nth-child(2) {
          aspect-ratio: 300 / 200; } }
  #space03 .picWrap {
    width: 100%;
    height: auto;
    overflow: hidden; }
  #space03 .pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; }
  #space03 .roomTxt {
    margin-top: 3rem;
    margin-bottom: 4rem;
    text-align: center; }
    @media (max-width: 999px) {
      #space03 .roomTxt {
        margin-top: 1.5rem;
        margin-bottom: 3rem; } }
  #space03 .widePic {
    margin-top: 0;
    margin-bottom: 0; }
    #space03 .widePic .picWrap {
      aspect-ratio: 1400 / 650; }
      @media (max-width: 999px) {
        #space03 .widePic .picWrap {
          aspect-ratio: 300 / 200; } }
    #space03 .widePic figcaption {
      margin-top: 3rem;
      text-align: center; }
      @media (max-width: 999px) {
        #space03 .widePic figcaption {
          margin-top: 1rem; } }

/*
---------------------------------------
space04
---------------------------------------
*/
#space04 {
  --bg-inner-width:min(89.33vw,176rem);
  --bg-right:calc((100vw - var(--bg-inner-width)) / 2);
  position: relative;
  padding-top: clamp(10rem, 8vw, 16rem);
  overflow: hidden;
  isolation: isolate; }
  @media (max-width: 999px) {
    #space04 {
      --bg-inner-width:89.33vw;
      --bg-right:5.335vw;
      padding-top: 5rem; } }
  #space04::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: calc(100% - var(--bg-right));
    height: clamp(24rem, 21vw, 34rem);
    background: #f7f7f7;
    content: "";
    pointer-events: none; }
    @media (max-width: 999px) {
      #space04::before {
        width: 96%;
        height: 27rem; } }
  #space04 .vipHead {
    display: flex;
    align-items: center;
    gap: clamp(6rem, 8vw, 14rem);
    margin-bottom: 4rem; }
    @media (max-width: 999px) {
      #space04 .vipHead {
        display: block;
        width: 82%;
        margin: 0 auto 3rem; } }
  #space04 .ttlBox {
    flex: 0 0 auto;
    min-width: 20rem; }
    @media (max-width: 999px) {
      #space04 .ttlBox {
        min-width: 0;
        margin-bottom: 2rem; } }
  #space04 .roomType {
    margin-bottom: 2rem;
    font-size: 2.6rem;
    line-height: 1.5; }
    @media (max-width: 999px) {
      #space04 .roomType {
        margin-bottom: 1rem;
        font-size: 1.4rem; } }
  #space04 .roomTtl {
    margin: 0;
    font-size: 3.8rem; }
    @media (max-width: 999px) {
      #space04 .roomTtl {
        font-size: 2.4rem; } }
  #space04 .vipPic {
    width: 100%;
    margin: 0;
    aspect-ratio: 1920 / 1020;
    overflow: hidden; }
    @media (max-width: 999px) {
      #space04 .vipPic {
        aspect-ratio: 375 / 260; } }
    #space04 .vipPic img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center; }