/* Scss Document */
/*
---------------------------------------
hospitality01
---------------------------------------
*/
#hospitality01 {
  position: relative;
  overflow: hidden; }
  @media (max-width: 999px) {
    #hospitality01 {
      margin-bottom: 6rem; } }
  #hospitality01 .headBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10rem; }
    @media (max-width: 999px) {
      #hospitality01 .headBox {
        display: block; } }
  @media (max-width: 999px) {
    #hospitality01 .ttlBox {
      margin-bottom: 3rem; } }
  #hospitality01 .ttl {
    font-size: 4.6rem; }
    @media (max-width: 999px) {
      #hospitality01 .ttl {
        font-size: 2.4rem; } }
    #hospitality01 .ttl span {
      display: block; }

/*
---------------------------------------
hospitality02
---------------------------------------
*/
#hospitality02 {
  --inner-width:min(89.33vw,140rem);
  --side-width:calc((100vw - var(--inner-width)) / 2);
  position: relative;
  padding-bottom: 16rem;
  overflow: hidden;
  isolation: isolate; }
  @media (max-width: 999px) {
    #hospitality02 {
      --inner-width:89.33vw;
      --side-width:5.335vw;
      padding-bottom: 6rem;
      margin-bottom: 6rem; } }
  #hospitality02::before {
    position: absolute;
    left: 0;
    top: 11rem;
    z-index: -1;
    width: 100%;
    height: 50rem;
    background: linear-gradient(to bottom, #f7f7f7 0%, #fff 100%);
    content: "";
    pointer-events: none; }
    @media (max-width: 999px) {
      #hospitality02::before {
        top: 4rem;
        height: 36rem;
        width: 90%; } }
  #hospitality02::after {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 34rem;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 0%, #f8f8f8 100%);
    content: "";
    pointer-events: none; }
    @media (max-width: 999px) {
      #hospitality02::after {
        height: 20rem; } }
  #hospitality02 .hospitalityGrid {
    display: grid;
    grid-template-columns: var(--side-width) calc(var(--inner-width) / 2) calc(var(--inner-width) / 2) var(--side-width);
    grid-template-rows: auto auto;
    align-items: start;
    width: 100%; }
    @media (max-width: 999px) {
      #hospitality02 .hospitalityGrid {
        grid-template-columns: 41% 59%;
        grid-template-rows: auto auto auto;
        gap: 2px;
        width: 89.33%;
        margin: 0 auto; } }
  #hospitality02 .ttlBox {
    grid-column: 2;
    grid-row: 1;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding-right: 6rem; }
    @media (max-width: 999px) {
      #hospitality02 .ttlBox {
        grid-column: 1 / 2;
        grid-row: 1;
        width: max-content;
        margin: 0 auto -2rem;
        padding-right: 0; } }
  #hospitality02 .ttl {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin: 0;
    font-size: 3.8rem; }
    @media (max-width: 999px) {
      #hospitality02 .ttl {
        font-size: 2rem;
        line-height: 1.7; } }
    #hospitality02 .ttl span {
      display: block; }
    #hospitality02 .ttl .line02 {
      margin-top: 4rem; }
      @media (max-width: 999px) {
        #hospitality02 .ttl .line02 {
          margin-top: 3rem; } }
  #hospitality02 .topPic {
    grid-column: 3 / 5;
    grid-row: 1;
    width: 100%;
    margin: 0;
    aspect-ratio: 900 / 600;
    overflow: hidden; }
    @media (max-width: 999px) {
      #hospitality02 .topPic {
        grid-column: 2;
        grid-row: 2;
        width: calc(100% + var(--side-width));
        margin: -3rem calc(var(--side-width) * -1) 0 0;
        aspect-ratio: 900 / 600; } }
  #hospitality02 .bottomPic {
    grid-column: 2;
    grid-row: 2;
    z-index: 2;
    width: 72%;
    margin: clamp(-16rem, calc(13.22rem - 15.22vw), -2rem) 0 0;
    aspect-ratio: 540 / 650;
    overflow: hidden; }
    @media (max-width: 999px) {
      #hospitality02 .bottomPic {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        width: 100%;
        margin: 4rem 0 0;
        aspect-ratio: 540 / 650; } }
  #hospitality02 .txtBox {
    grid-column: 3;
    grid-row: 2;
    width: 100%;
    margin: 6vw auto 0; }
    @media (max-width: 999px) {
      #hospitality02 .txtBox {
        grid-column: 1 / 3;
        grid-row: 3;
        width: 100%;
        max-width: none;
        margin: 3rem 0 0; } }
  @media (max-width: 999px) {
    #hospitality02 .txt {
      margin-bottom: 4rem; } }
  @media (max-width: 999px) {
    #hospitality02 .btn {
      width: 90%;
      margin: 0 auto; } }
  #hospitality02 .pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; }

/*
---------------------------------------
hospitality03
---------------------------------------
*/
#hospitality03 {
  position: relative;
  padding: 0 0 16rem;
  overflow: hidden;
  isolation: isolate; }
  @media (max-width: 999px) {
    #hospitality03 {
      padding: 0rem 0 6rem;
      margin-bottom: 6rem; } }
  #hospitality03::before {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 48rem;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 0.45) 25%, rgba(248, 248, 248, 0.85) 65%, #f8f8f8 100%);
    content: "";
    pointer-events: none; }
    @media (max-width: 999px) {
      #hospitality03::before {
        height: 30rem; } }
  #hospitality03 .contentInner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; }
    @media (max-width: 999px) {
      #hospitality03 .contentInner {
        display: flex;
        flex-direction: column;
        width: 89.33%;
        gap: 3rem; } }
  #hospitality03 .txtArea {
    padding: 0 8rem 0 0; }
    @media (max-width: 999px) {
      #hospitality03 .txtArea {
        display: contents;
        padding: 0; } }
  #hospitality03 .ttlBox {
    margin-bottom: 8rem; }
    @media (max-width: 999px) {
      #hospitality03 .ttlBox {
        order: 1;
        width: 100%;
        margin-bottom: 0; } }
  #hospitality03 .lead {
    margin-bottom: 2rem;
    font-size: 2.6rem;
    line-height: 1.5; }
    @media (max-width: 999px) {
      #hospitality03 .lead {
        margin-bottom: .8rem;
        font-size: 1.6rem; } }
  #hospitality03 .ttl {
    margin: 0 0 1rem;
    font-size: 3.6rem; }
    @media (max-width: 999px) {
      #hospitality03 .ttl {
        margin-bottom: .5rem;
        font-size: 2.2rem; } }
  #hospitality03 .price {
    font-size: 2.6rem;
    line-height: 1.5; }
    @media (max-width: 999px) {
      #hospitality03 .price {
        font-size: 1.6rem; } }
    #hospitality03 .price small {
      margin-left: .3rem;
      font-size: .65em; }
  #hospitality03 .txtBox {
    max-width: 52rem; }
    @media (max-width: 999px) {
      #hospitality03 .txtBox {
        display: contents; } }
  @media (max-width: 999px) {
    #hospitality03 .txt {
      order: 3;
      margin-bottom: 0; } }
  #hospitality03 .note {
    font-size: 1.6rem; }
    @media (max-width: 999px) {
      #hospitality03 .note {
        order: 4;
        font-size: 1.2rem;
        margin-bottom: 0;
        margin-top: -2rem; } }
  @media (max-width: 999px) {
    #hospitality03 .bottomTxt {
      order: 5;
      line-height: 2;
      margin-bottom: 0; } }
  #hospitality03 .btn {
    background: inherit; }
    @media (max-width: 999px) {
      #hospitality03 .btn {
        order: 6;
        width: 100%; } }
  #hospitality03 .mainPic {
    width: 100%;
    margin: 0; }
    @media (max-width: 999px) {
      #hospitality03 .mainPic {
        order: 2; } }
  #hospitality03 .picWrap {
    width: 100%;
    aspect-ratio: 770 / 776;
    overflow: hidden; }
    @media (max-width: 999px) {
      #hospitality03 .picWrap {
        aspect-ratio: 1 / 1; } }
  #hospitality03 .pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; }
  #hospitality03 .priceNote {
    margin-top: 4rem;
    font-size: 1.6rem;
    text-align: right; }
    @media (max-width: 999px) {
      #hospitality03 .priceNote {
        margin-top: 1rem;
        font-size: 1rem; } }

/*
---------------------------------------
hospitality04
---------------------------------------
*/
#hospitality04 {
  position: relative;
  overflow: hidden; }
  @media (max-width: 999px) {
    #hospitality04 {
      margin-bottom: 6rem; } }
  #hospitality04 .headArea {
    margin-bottom: 8rem; }
    @media (max-width: 999px) {
      #hospitality04 .headArea {
        margin-bottom: 4rem; } }
  #hospitality04 .ttlBox {
    margin-bottom: 8rem; }
    @media (max-width: 999px) {
      #hospitality04 .ttlBox {
        margin-bottom: 3rem; } }
  #hospitality04 .ttl {
    margin: 0;
    font-size: 3.8rem; }
    @media (max-width: 999px) {
      #hospitality04 .ttl {
        font-size: 2rem; } }
  #hospitality04 .bottomBox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40rem;
    align-items: center;
    gap: 8rem; }
    @media (max-width: 999px) {
      #hospitality04 .bottomBox {
        display: block; } }
  #hospitality04 .txtBox {
    min-width: 0; }
    @media (max-width: 999px) {
      #hospitality04 .txtBox {
        margin-bottom: 3rem; } }
  #hospitality04 .txt {
    margin-bottom: 0; }
    @media (max-width: 999px) {
      #hospitality04 .txt {
        line-height: 2; }
        #hospitality04 .txt br {
          display: none; } }
  #hospitality04 .btnBox {
    width: 100%; }
    @media (max-width: 999px) {
      #hospitality04 .btnBox {
        width: 90%;
        margin: 0 auto; } }
  #hospitality04 .btn {
    width: 100%;
    background: inherit; }
  #hospitality04 .mainPic {
    width: 100%;
    margin: 0; }
  #hospitality04 .picWrap {
    width: 100%;
    aspect-ratio: 1400 / 400;
    overflow: hidden; }
  #hospitality04 .pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; }
    @media (max-width: 999px) {
      #hospitality04 .pic {
        object-position: 60% center; } }