@charset "UTF-8";

/* =============================================================================

Breakfast CSS

・朝食用CSS「.stay_breakfast-×××」

上記はここに記述する

============================================================================= */

/* 序盤
----------------------------------------------------------------------------- */
.stay_breakfast-intro {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .intro-top {
    @media (width > 640px) {
      display:grid;
      grid-template-columns: calc(50% - 5.0rem) 1fr;
      column-gap:14.0rem;
    }
    @media (width <= 640px) {
    }
    .top-img {
      @media (width > 640px) {
        height:50.0rem;
      }
      @media (width <= 640px) {
        margin-bottom:6.4rem;
        margin-right:var(--pi-sp-30);
      }
      img {
        width:100%;
        @media (width > 640px) {
          height:100%;
        }
      }
    }
  }

  .js-infiniteloop {
    font-size:12.0rem;
    line-height:1;
    letter-spacing: .07em;
    color:var(--cc-white-B);
    position:relative;
    @media (width > 640px) {
      margin-block:4.8rem -.5lh;
      z-index: 1;
    }
    @media (width <= 640px) {
      width:100vw;
      margin-top:14.0rem;
      font-size:5.0rem;
      position:absolute;
      left:0;
    }
  }

  .intro-gallery {
    position:relative;
    height:52.0rem;
    @media (width <= 640px) {
      margin-top:6.4rem;
      height:39.5rem;
    }
    > img {
      position:absolute;
    }
    .img01 {
      top:0;
      left:20.4rem;
      @media (width <= 640px) {
        left:8.0rem;
      }
    }
    .img02 {
      left:0;
      @media (width > 640px) {
        bottom:0;
      }
      @media (width <= 640px) {
        top:17.2rem;
      }
    }
    .img03 {
      bottom:0;
      right:0;
    }
  }
}

/* 途中組写真
----------------------------------------------------------------------------- */
.stay_breakfast-interlude {
  display:grid;
  padding-inline:var(--body-pd);
  gap:2px;
  @media (width > 640px) {
    height:90.0rem;
    grid-template-rows:repeat(3,1fr);
    grid-template-columns: 1fr 39.2rem 39.2rem 1fr;
  }
  @media (width <= 640px) {
    grid-template-rows:14.2rem repeat(3,18.8rem) 14.2rem ;
    grid-template-columns: repeat(3,1fr);
  }
  .text {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap:1.6rem;
    line-height:1.6;
    @media (width > 640px) {
      grid-row:2/3;
      grid-column:2/4;
    }
    @media (width <= 640px) {
      grid-row:3/4;
      grid-column:1/-1;
    }
    .main {
      font-size:2.2rem;
      letter-spacing: .07em;
    }
    .sub {
      font-size:1.4rem;
      letter-spacing: .07em;
    }
  }
  .img {
    &._01 {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:3/5;
      }
      @media (width <= 640px) {
        grid-row:1/2;
        grid-column:1/-1;
      }
    }
    &._02 {
      @media (width > 640px) {
        grid-row:2/4;
        grid-column:4/5;
      }
      @media (width <= 640px) {
        grid-row:2/3;
        grid-column:1/3;
      }
    }
    &._03 {
      @media (width > 640px) {
        grid-row:3/4;
        grid-column:3/4;
      }
      @media (width <= 640px) {
        grid-row:2/3;
        grid-column:3/4;
      }
    }
    &._04 {
      @media (width > 640px) {
        grid-row:1/3;
        grid-column:1/2;
      }
      @media (width <= 640px) {
        grid-row:-3/-2;
        grid-column:1/2;
      }
    }
    &._05 {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:2/3;
      }
      @media (width <= 640px) {
        grid-row:-3/-2;
        grid-column:2/4;
      }
    }
    &._06 {
      @media (width > 640px) {
        grid-row:3/4;
        grid-column:1/3;
      }
      @media (width <= 640px) {
        grid-row:-2/-1;
        grid-column:1/-1;
      }
    }
  }
}


/* 人気メニュー
----------------------------------------------------------------------------- */
.stay_breakfast-pickup {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
  &:not(.p-bg-white-B) {
    .l-column3-carousel {
      @media (width > 640px) {
        width:118.0rem;
      }
    }
  }
  .img-tag {
    padding-block: 1.2rem;
    padding-inline: 1.6rem 2.5rem;
    position: absolute;
    top: 1.7rem;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: .12em;
    clip-path: polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%);
  }
}

.stay_breakfast-gallery {
  > .p-tg-text-C {
    color:var(--cc-gray_text-A);
  }
}


/* SelectorName
----------------------------------------------------------------------------- */
.stay_breakfast-SelectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}