@charset "UTF-8";

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

Layout CSS

・レイアウトコンポネ用クラス「.l-×××」

上記はここに記述する

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

/* Heading
============================================================================= */
/* A */
.l-heading-A {
  display:flex;
  align-items: center;
  flex-direction: column-reverse;
  gap:2.4rem;
  text-align: center;
  margin-bottom:var(--mb-D);
  font-weight:500;
}
.l-heading-A > span {
  margin-block:calc(.5em - .5lh);
}
.l-heading-A .en {
  font-size:5.0rem;
  letter-spacing: .18em;
  line-height:1.4;
}
.l-heading-A .ja {
  font-size:2.0rem;
  letter-spacing: .2em;
  line-height:1.5;
}
@media (width <= 640px) {
  .l-heading-A {
    gap:1.6rem;
  }
  .l-heading-A .en {
    font-size:3.0rem;
  }
  .l-heading-A .ja {
    font-size:1.4rem;
  }
}

/* B */
.l-heading-B {
  display:flex;
  margin-bottom:2.4rem;
  padding-bottom:2.4rem;
  border-bottom:1px solid;
  font-size:2.6rem;
  line-height:1.5;
  letter-spacing: .04em;
}
.l-heading-B > span {
  margin-block:calc(.5em - .5lh);
}
@media (width <= 640px) {
  .l-heading-B {
    margin-bottom:1.2rem;
    padding-bottom:1.0rem;
    font-size:1.8rem;
  }
}


/* C,D */
:is(.l-heading-C,.l-heading-D) {
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-bottom:6.0rem;
}
:is(.l-heading-C,.l-heading-D):not(.-left) {
}
:is(.l-heading-C,.l-heading-D)::before {
  content:"";
  display:block;
  margin-bottom:4.0rem;
  width:3.0rem;
  border-top:2px solid var(--cc-orange-A-hex);
}
:is(.l-heading-C,.l-heading-D) > span {
  margin-block:calc(.5em - .5lh);
}
:is(.l-heading-C,.l-heading-D) .en {
  margin-bottom:1.2rem;
  font-size:4.6rem;
  letter-spacing: .2em;
  line-height:1.4;
}
:is(.l-heading-C,.l-heading-D) .ja {
  order:3;
  font-size:1.6rem;
  letter-spacing: .1em;
  line-height:1.5;
}
/* Dのみ */
.l-heading-D .en {
  display:flex;
  align-items: center;
  flex-direction: column;
}
.l-heading-D .en::before {
  content:"Premier Hotel-CABIN-Sapporo";
  margin-bottom:1.2rem;
  font-size:1.0rem;
  line-height:1;
  letter-spacing: .1em;
}
@media (width > 640px) {
  /* Cのみ */
  .l-heading-C {
    align-items: flex-start;
  }
}
@media (width <= 640px) {
  :is(.l-heading-C,.l-heading-D) {
    margin-bottom:4.8rem;
  }
  :is(.l-heading-C,.l-heading-D):not(.-left) {
    align-items: center;
  }
  :is(.l-heading-C,.l-heading-D)::before {
    margin-bottom:2.8rem;
  }
  :is(.l-heading-C,.l-heading-D) .en {
    margin-bottom:.6rem;
    font-size:3.6rem;
  }
  :is(.l-heading-C,.l-heading-D) .ja {
    font-size:1.4rem;
  }
  /* Dのみ */
  .l-heading-D .en {
    display:flex;
    flex-direction: column;
  }
  .l-heading-D:not(.-left) .en {
    align-items: center;
  }
  .l-heading-D .en::before {
    margin-block:.4rem 1.2rem;
  }
}

/* Button Arrow Consolidate
----------------------------------------------------------------------------- */
:where(:is(.l-button-A,.l-button-B,.l-button-C,.l-news-list-A-item-link) .m-i-bf-arrow-A) {
  --my-w:30;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius:50%;
  width:calc(var(--my-w) * .1rem);
  height:calc(var(--my-w) * .1rem);
  background-color:var(--cc-orange-A-hex);
  position:absolute;
  transition-property:transform;
  transition-duration:var(--duration-hover-A);
  transition-timing-function: var(--ttf-eio-quint);
}
:where(:is(.l-button-A,.l-button-B,.l-button-C,.l-news-list-A-item-link) .m-i-bf-arrow-A::before) {
  transition-property:transform;
  transition-duration:var(--duration-hover-A);
  transition-timing-function: var(--ttf-eio-quint);
}
@media (hover) {
  :is(.l-button-A,.l-button-B,.l-button-C,.l-news-list-A-item-link):not(.is-disabled):hover .m-i-bf-arrow-A {
    transform:scale(1);
  }
  :is(.l-button-A,.l-button-B,.l-button-C,.l-news-list-A-item-link):not(.is-disabled):hover .m-i-bf-arrow-A::before {
    transform:scale(1);
  }
}
@media (width > 640px) {
  :where(:is(.l-button-A,.l-button-B,.l-button-C,.l-news-list-A-item-link) .m-i-bf-arrow-A) {
    transform:scale(calc(5 / var(--my-w)));
  }
  :where(:is(.l-button-A,.l-button-B,.l-button-C,.l-news-list-A-item-link) .m-i-bf-arrow-A::before) {
    transform:scale(0);
  }
}
@media (width <= 640px) {
  :where(:is(.l-button-A,.l-button-B,.l-button-C,.l-news-list-A-item-link) .m-i-bf-arrow-A) {
    --my-w:20;
  }
}


/* Button
----------------------------------------------------------------------------- */
._t-right :is([class*="l-button"]) {
  margin-inline-start:auto;
}
._t-center :is([class*="l-button"]) {
  margin-inline:auto;
}
/* A,B */
:is(.l-button-A,.l-button-B) {
  display:flex;
  justify-content: center;
  align-items: center;
  margin-inline:auto;
  border-radius:100px;
  width:fit-content;
  font-size:1.5rem;
  line-height:1.5;
  letter-spacing: .05em;
  color:#fff;
  background-color:var(--cc-black-A-hex);
  transition-property:background-color;
  transition-duration:var(--duration-hover-A);
  position:relative;
}
:is(.l-button-A,.l-button-B).p-ff-bellefair {
  letter-spacing:.25em;
}
:is(.l-button-A,.l-button-B):not(.p-ff-bellefair) > span {
  padding-bottom:.1em;
}
:is(.l-button-A,.l-button-B).p-ff-bellefair > span {
  padding-top:.25em;
}
@media (hover) {
  :is(.l-button-A,.l-button-B):hover {
    background-color:var(--cc-black-B-hex);
  }
}
.l-button-A {
  padding-inline:5.0rem;
  min-width:30.0rem;
  height:6.0rem;
}
.l-button-A .m-i-bf-arrow-A {
  right:1.6rem;
}
.l-button-B {
  padding-inline:3.6rem;
  min-width:18.0rem;
  height:4.0rem;
}
.l-button-B .m-i-bf-arrow-A {
  right:.8rem;
}
@media (width > 640px) {
  .l-button-B .m-i-bf-arrow-A {
    --my-w:24;
  }
}
@media (width <= 640px) {
  .l-button-A {
    padding-inline:4.0rem;
    min-width:23.0rem;
    height:5.0rem;
    font-size:1.4rem;
  }
  .l-button-A .m-i-bf-arrow-A {
    right:1.5rem;
  }
  .l-button-B {
    min-width:18.0rem;
    height:4.0rem;
    font-size:1.4rem;
  }
  .l-button-B .m-i-bf-arrow-A {
    right:1.0rem;
  }
}

/* C */
.l-button-C {
  display:flex;
  align-items: center;
  width:fit-content;
  gap:.4rem;
  font-size:1.5rem;
  letter-spacing: .1em;
  line-height:1.5;
}
.l-button-C .m-i-bf-arrow-A {
  align-items: center;
  position:relative;
}
@media (width <= 640px) {
  .l-button-C {
    gap:1.0rem;
  }
  .l-button-C > span {
    padding-bottom:.15em;
  }
}

/* D */
.l-button-D {
  display:flex;
  align-items: center;
  width:fit-content;
  gap:.8rem;
  font-family:var(--ff-noto-sans);
  font-size:1.6rem;
  letter-spacing: .05em;
  line-height:1.5;
  font-weight:700;
  color:var(--cc-black-A-hex);
  transition-property:opacity;
  transition-duration: var(--duration-hover-A);
}
@media (hover) {
  .l-button-D:hover {
    opacity:.7;
  }
}
.l-button-D > span {
  padding-bottom:.1em;
}
.l-button-D .m-i-bf-arrow-A {
  flex-shrink: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width:2.4rem;
  height:2.4rem;
  background-color:var(--cc-orange-A-hex);
  align-items: center;
  position:relative;
}
@media (width <= 640px) {
  .l-button-D {
    gap:.6rem;
    font-size:1.3rem;
    letter-spacing: 0;
  }
  .l-button-D .m-i-bf-arrow-A {
    width:2.0rem;
    height:2.0rem;
  }
}


/* E */
.l-button-E {
  display:flex;
  align-items: center;
  width:fit-content;
  gap:.2rem;
  font-family:var(--ff-noto-sans);
  font-size:1.2rem;
  letter-spacing: .05em;
  line-height:1.5;
  font-weight:500;
  text-decoration: underline;
  text-underline-offset: .2em;
  color:var(--cc-black-A-hex);
  transition-property:opacity;
  transition-duration: var(--duration-hover-A);
}
.l-button-E::before {
  background-color:var(--cc-black-A-hex);
}
@media (hover) {
  .l-button-E:hover {
    opacity:.7;
    text-decoration: none;
  }
}
.l-button-E .m-i-bf-arrow-A {
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width:2.4rem;
  height:2.4rem;
  background-color:var(--cc-orange-A-hex);
  align-items: center;
  position:relative;
}


/* Reservation */
.l-reservation-button-A {
  display:flex;
  align-items: center;
  justify-content: center;
  border-radius:var(--radius-C);
  transition-property:background-color;
  transition-duration:var(--duration-hover-A);
  padding-left:1.2rem;
  width:18.0rem;
  height:5.6rem;
  font-size:1.4rem;
  line-height:1;
  position:relative;
  color:#fff;
}
.l-reservation-button-A:is(.-member) {
  --hover-color:var(--cc-green-B-hex);
  background-color:var(--cc-green-A-hex);
}
.l-reservation-button-A:not(.-member) {
  --hover-color:var(--cc-orange-B-hex);
  background-color:var(--cc-orange-A-hex);
}
@media (hover) {
  .l-reservation-button-A:hover {
    background-color:var(--hover-color);
  }
}
.l-reservation-button-A::before {
  position:absolute;
}
.l-reservation-button-A:is(.-member)::before {
  left:1.2rem;
}
.l-reservation-button-A:not(.-member)::before {
  left:1.6rem;
}
.l-reservation-button-A::after {
  position:absolute;
  right:1.6rem;
  width:.8rem;
}
.l-reservation-button-A > span {
  padding-bottom:.2em;
}
@media (width <= 640px) {
  .l-reservation-button-A {
    font-size:1.3rem;
  }
}


/* News List
----------------------------------------------------------------------------- */
.l-news-list-A-item {
  border-bottom:1px solid var(--cc-gray-C-hex);
}
.l-news-list-A-item-link {
  display:grid;
}
.l-news-list-A-item .m-i-bf-arrow-A {
  position:relative;
}
.l-news-list-A-item-link :is(.l-date-A,.title) {
  transition-property: opacity;
  transition-duration: var(--duration-hover-A);
}
@media (hover) {
  .l-news-list-A-item-link:hover :is(.l-date-A,.title) {
    opacity:.6;
  }
}
@media (width > 640px) {
  .l-news-list-A {
    grid-column:2/3;
    grid-row:1/3;
  }
  .top-news-link {
    grid-column:1/2;
    grid-row:2/3;
  }
  .l-news-list-A-item {
    padding-inline:1.0rem;
  }
  .l-news-list-A-item-link {
    grid-template-columns:14.5rem 1fr;
    grid-auto-flow: column;
    align-items: center;
    padding-block:2.0rem;
  }
  .l-news-list-A-item .title {
    display:flex;
    flex-direction: column;
  }
}
@media (width <= 640px) {
  .l-news-list-A {
    margin-top:-2.4rem;
  }
  .l-news-list-A-item-link {
    align-items: flex-end;
    grid-template-columns:1fr auto;
    gap:1.2rem;
    padding-block:2.4rem;
  }
  .l-news-list-A-item .l-date-A {
    grid-column:1/3;
  }
  .l-news-list-A-item .title {
    display:flex;
    flex-direction: column;
  }
  .l-news-list-A-item .m-i-bf-arrow-A {
    margin-bottom:-.4rem;
  }
}

/* Lower Page KV
----------------------------------------------------------------------------- */
/* A */
.l-lowerpage-kv-A {
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:var(--cc-gray-A-hex);
  color:#fff;
  height:100svh;
  position:relative;
}
.l-lowerpage-kv-A::before {
  content:"";
  display:block;
  width:calc(var(--logo-w) + var(--radius-A));
  height:calc(var(--logo-static-h) + var(--radius-A));
  background-color:var(--cc-gray-A-hex);
  position:absolute;
  top:0;
  left:0;
  transition-property: transform,opacity;
  transition-duration: var(--duration-hover-A);
  z-index: 1;
  -webkit-mask-image:
    url(/sapporo/assets/svg/reverse-radius-lt.svg),
    url(/sapporo/assets/svg/reverse-radius-lt.svg)
  ;
  mask-image:
    url(/sapporo/assets/svg/reverse-radius-lt.svg),
    url(/sapporo/assets/svg/reverse-radius-lt.svg)
  ;
  -webkit-mask-position:
    right var(--body-padding),
    var(--body-padding) bottom
  ;
  mask-position:
    right var(--body-padding),
    var(--body-padding) bottom
  ;
  -webkit-mask-size:var(--radius-A);
  mask-size:var(--radius-A);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
body.is-scrolled .l-lowerpage-kv-A::before {
  transform:translateY(-100%);
  opacity:0;
}
.l-lowerpage-kv-A .l-lowerpage-kv_text-A {
  position:relative;
  z-index: 1;
}
.l-lowerpage-kv-A > .bg {
  margin:auto;
  position:absolute;
  inset:var(--body-padding);
  pointer-events: none;
}
.l-lowerpage-kv-A > .bg img {
  border-radius:var(--radius-A);
}
@media (width > 640px) {
  .l-lowerpage-kv-A > .bg::after {
    content:"";
    display:block;
    border-radius:var(--radius-A) var(--radius-A) 0 0;
    width: 100%;
    height:30.0rem;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0.24) 0%, rgba(255, 255, 255, 0.30) 55.32%);
    mix-blend-mode: multiply;
    position:absolute;
    top:0;
    left:0;
  }
}
@media (width <= 640px) {
  .l-lowerpage-kv-A {
    margin-block:var(--header-height) 0;
    padding-bottom:3.6rem;
    height:calc(100svh - var(--header-height) - var(--sp-fixed-height) + var(--body-padding));
  }
  .l-lowerpage-kv-A::before {
    position:fixed;
    -webkit-mask-position:
      right var(--header-height),
      var(--body-padding) bottom
    ;
    mask-position:
      right var(--header-height),
      var(--body-padding) bottom
    ;
  }
  .l-lowerpage-kv-A > .bg {
    top:0;
  }
  .l-lowerpage-kv-A > .bg::after {
  }
}

/* B */
.l-lowerpage-kv-B {
  padding-block:7.0rem 5.0rem;
}
@media (width <= 640px) {
  .l-lowerpage-kv-B {
    padding-block:6.5rem 4.0rem;
  }
}

/* KV Text */
.l-lowerpage-kv_text-A {
  text-align: center;
  position:relative;
}
.l-lowerpage-kv_text-A::before {
  content:"";
  display:block;
  margin-inline:auto;
  margin-bottom:4.0rem;
  width:3.0rem;
  height:2px;
  background-color:var(--cc-orange-A-hex);
}
.l-lowerpage-kv_text-A .hotel_name {
  font-size:1.1rem;
  letter-spacing: .1em;
  line-height:calc(14/10);
}
.l-lowerpage-kv_text-A .heading {
  display:flex;
  flex-direction: column-reverse;
  margin-top:2.4rem;
}
.l-lowerpage-kv_text-A .heading > .en {
  font-size:5.0rem;
  line-height:1.28;
  letter-spacing: .18em;
}
.l-lowerpage-kv_text-A .heading > .ja {
  margin-top:0.8rem;
  font-weight:400;
  font-size:2.4rem;
  line-height:1;
  letter-spacing: .2em;
}
@media (width > 640px) {
}
@media (width <= 640px) {
  .l-lowerpage-kv_text-A::before {
    margin-bottom:2.4rem;
  }
  .l-lowerpage-kv_text-A {
    padding-top:2.4rem;
  }
  .l-lowerpage-kv_text-A .heading {
    margin-top:1.6rem;
  }
  .l-lowerpage-kv_text-A .heading > .en {
    font-size:3.5rem;
  }
  .l-lowerpage-kv_text-A .heading > .ja {
    margin-top:.8rem;
    font-size:1.5rem;
  }
}


/* Table
============================================================================= */
/* A */
.l-table-A {
  border-top:1px solid var(--cc-gray-E-hex);
  width:100%;
  line-height:1.6;
}
.l-table-A:has(colgroup) {
  table-layout: fixed;
}
.l-table-A :is(th,td) {
  border-bottom:1px solid var(--cc-gray-E-hex);
  padding-block:.9rem 1.2rem;
  vertical-align: middle;
}
.l-table-A th {
  padding-inline:1.2rem;
  background-color:var(--cc-gray-D-hex);
}
.l-table-A td {
  padding-inline:2.0rem;
}
@media (width > 640px) {
  .l-table-A col[style*="--tc-pc"] {
    width:calc(var(--tc-pc) * .1rem);
  }
}
@media (width <= 640px) {
  .l-table-A {
    font-size:1.2rem;
  }
  .l-table-A col[style*="--tc-sp"] {
    width:calc(var(--tc-sp) * .1rem);
  }
  .l-table-A :is(th,td) {
    padding-block:1.8rem 2.0rem;
  }
  .l-table-A th {
    padding-inline:.8rem;
    text-align: center;
  }
  .l-table-A td {
    padding-inline:1.0rem;
  }
}

/* B */
.l-table-B {
  --tc:calc(11.0rem + 1px);
  display:grid;
  grid-template-columns:var(--tc) 1fr;
  font-size:1.5rem;
  line-height:1.6;
  letter-spacing: .08em;
}
.l-table-B > div {
  grid-column:1/3;
  display:grid;
  grid-template-columns:subgrid;
  align-items: flex-start;
  border-bottom:1px solid var(--cc-gray-C-hex);
  padding-block:1.4rem;
}
.l-table-B > div:first-child {
  padding-top:0;
}
.l-table-B:has(colgroup) {
  table-layout: fixed;
}
.l-table-B :is(dt,dd) {
  padding-bottom:.3em;
}
.l-table-B dt {
  position:relative;
}
.l-table-B dt::after {
  content:"";
  border-right:1px solid var(--cc-gray-C-hex);
  height:calc(100% - .4em);
  position:absolute;
  top:.25em;
  right:0;
}
.l-table-B dd {
  padding-left:2.4rem;
}
@media (width > 640px) {
  .l-table-B[style*="--tc-pc"] {
    --tc:calc(var(--tc-pc) * .1rem + 1px);
  }
}
@media (width <= 640px) {
  .l-table-B {
    font-size:1.2rem;
  }
  .l-table-B[style*="--tc-sp"] {
    --tc:calc(var(--tc-sp) * .1rem + 1px);
  }
  .l-table-B > div {
    padding-block:1.0rem;
  }
  .l-table-B :is(dt,dd) {
    padding-bottom:0;
  }
  .l-table-B dd {
    padding-left:1.2rem;
  }
}


/* C */
.l-table-C {
  display:grid;
  font-size:1.6rem;
  letter-spacing: .05em;
  line-height:1.8;
}
.l-table-C > div {
  display:grid;
}
.l-table-C:has(colgroup) {
  table-layout: fixed;
}
@media (width > 640px) {
  .l-table-C[style*="--tc-pc"] {
    --tc-pc:calc(11.0rem + 1px);
    grid-template-columns:calc(var(--tc-pc)*.1rem) 1fr;
  }
  .l-table-C > div {
    grid-column:1/3;
    grid-template-columns:subgrid;
    /* align-items: flex-start; */
    border-bottom:1px solid var(--cc-gray-C-hex);
    padding-block:1.4rem;
  }
  .l-table-C > div:first-child {
    padding-top:0;
  }
  .l-table-C dt {
    position:relative;
    padding-right:2.4rem;
  }
  .l-table-C dt::after {
    content:"";
    border-right:1px solid var(--cc-gray-C-hex);
    height:calc(100% - .9em);
    position:absolute;
    top:.4em;
    right:0;
  }
  .l-table-C dd {
    padding-left:2.4rem;
  }
  .l-table-C :is(dt,dd) {
    padding-bottom:.3em;
  }
}
@media (width <= 640px) {
  .l-table-C {
    gap:2.0rem;
    font-size:1.4rem;
    letter-spacing: .1em;
  }
  .l-table-C + .l-table-C {
    margin-top:2.0rem;
  }
  .l-table-C > div {
    gap:1.0rem;
  }
  .l-table-C :is(dt,dd) {
    padding-inline:1.0rem;
  }
  .l-table-C dt {
    padding-block:.6rem .7rem;
    border-radius:var(--radius-B);
    background-color:var(--cc-gray-A-hex);
    letter-spacing: .15em;
  }
  .l-table-C dd {
    padding-inline:1.2rem 0;
  }
}


/* Date
============================================================================= */
.l-date-A {
  display:flex;
  align-items: center;
  gap:.6rem;
}
.l-date-A::before {
  content:"";
  display:block;
  margin-top:-.2em;
  border-bottom:1px solid var(--cc-orange-A-hex);
  width:1.0rem;
}