@charset "UTF-8";

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

Global CSS

・ヘッダー、フッター等のページ共通で使用される要素「.g-×××」

上記はここに記述する

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

/* Global CSS .g-
============================================================================= */

/* Header
----------------------------------------------------------------------------- */
body:not(.is-header_overlap) .g-header {
  --change-color:var(--base-font-color);
}
body.is-header_overlap:not(.is-scrolled):not(.is-spmenu-open) .g-header {
  --change-color:#fff;
}
body.is-header_overlap:is(.is-scrolled,.is-spmenu-open) .g-header {
  --change-color:var(--base-font-color);
}
.g-header_inner {
  line-height:1.5;
}
.g-header > :is(.logo-static,.logo-fixed) {
  position:fixed;
  top:0;
  left:0;
}
body.is-scrolled:not(.is-spmenu-open) .g-header > .logo-static {
  transform:translateY(calc(var(--logo-static-h) * -1));
  opacity:0;
}
.g-header > .logo-static {
  border-bottom-right-radius: var(--radius-A);
  background-color:var(--cc-gray-A-hex);
  z-index:1002;
  transition-property: transform,opacity;
  transition-duration: calc(var(--duration-hover-A));
}
.g-header > .logo-fixed {
  z-index:1001;
}
.g-header > :is(.logo-static,.logo-fixed) > a {
  display:flex;
  justify-content:center;
  align-items: center;
  width:var(--logo-w);
}
.g-header > .logo-static > a {
  height:var(--logo-static-h);
}
.g-header > .logo-fixed > a {
  height:var(--header-height);
  transition-property: opacity,height;
  transition-duration: var(--duration-hover-A);
}
.g-header .language {
  --gap:1.2rem;
  display:grid;
  grid-auto-flow: column;
  align-items: center;
  margin-inline:calc(var(--gap) * -1);
  position:relative;
  bottom:calc(.5lh - .5em);
}
.g-header .language-item {
  padding-top:calc(.5lh - .5em);
  position:relative;
}
.g-header .language-item:not(:first-child)::before {
  content:"";
  margin-block:auto;
  width:0;
  border-left:1px solid;
  position:absolute;
  left:0;
  inset-block:calc(.5lh - .5em);
  transition-property: border-color;
  transition-duration:var(--duration-hover-A);
}
.g-header .language-item > :is(span,a) {
  display:block;
  padding-inline:var(--gap);
  position:relative;
}
.g-header .language-item > span {
  color:var(--cc-orange-A-hex);
}
.g-header .nav-main-item-child-item .en {
  display:flex;
  align-items: center;
}
.g-header .nav-main-item-child-item .en .m-i-af-arrow-A {
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width:2.0rem;
  height:auto;
  aspect-ratio: 1/1;
  background-color:var(--cc-orange-A-hex);
}
.g-header .nav-sub {
  display:grid;
}
.g-header .nav-sub-item > a {
  display:flex;
  align-items: center;
  gap:.6rem;
}
.g-header .nav-sub-item > a::before {
  flex-shrink: 0;
  content:"";
  display:block;
  margin-top:.1rem;
  width:.5rem;
  height:.6rem;
  background-color:var(--cc-orange-A-hex);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.g-header .nav-sns {
  display:grid;
  grid-auto-flow: column;
  gap:2.0rem;
}
.g-header .nav-sns-item > a {
  display:block;
}
.g-header .nav-sns-item > a > i {
  display:block;
}
.g-header .reservations {
  display:grid;
  gap:1.5rem;
  grid-auto-flow: column;
}
@media (width > 640px) {
  body.is-header_overlap:not(.is-scrolled) .g-header_inner {
    background-color:transparent;
  }
  .g-header_inner {
    display:grid;
    grid-template-rows:1fr auto auto 1fr;
    grid-template-columns:1fr repeat(5,auto);
    align-items: center;
    column-gap:3.0rem;
    padding-inline:var(--logo-w) 4.0rem;
    width:100%;
    min-width:var(--pc-min-width);
    height:var(--header-height);
    color:var(--change-color);
    background-color:var(--cc-gray-A-hex);
    position:fixed;
    top:0;
    transition-property: background-color,color,height,box-shadow;
    transition-duration:var(--duration-hover-A);
    z-index: 1000;
  }
  body.is-scrolled .g-header_inner {
    box-shadow:var(--shadow-A);
  }
  .g-header .language {
    grid-row:2/3;
    grid-column:5/6;
    margin-left:auto;
    font-size:1.4rem;
    letter-spacing: .07em;
    position:relative;
    z-index: 1;
  }
  .g-header .nav {
    grid-row:2/4;
    grid-column:2/6;
    display:grid;
    grid-template-rows:subgrid;
    grid-template-columns:subgrid;
    justify-items: flex-start;
    align-items: center;
    row-gap:1.4rem;
  }
  .g-header .nav-main {
    --gap:1.5rem;
    grid-row:2/3;
    grid-column:1/6;
    display:grid;
    grid-auto-flow: column;
    align-items: center;
    margin-inline:calc(var(--gap) * -1);
    font-size:1.5rem;
    letter-spacing: .1em;
  }
  .g-header .nav-main-item {
    display:flex;
    justify-content: center;
  }
  .g-header .nav-main-item:not(:last-child)::after {
    flex-shrink: 0;
    content:"";
    display:block;
    margin-top:.25em;
    width:0;
    height:1em;
    border-right:1px solid;
    transition-property: border-color;
    transition-duration:var(--duration-hover-A);
  }
  .g-header .nav-main-item > :is(a,button) {
    display:flex;
    align-items: center;
    padding-inline:var(--gap);
  }
  .g-header .nav-main-item-child {
    padding:2.0rem;
    margin-top:1lh;
    position:absolute;
    transition-property: opacity,transform;
    transition-duration: var(--duration-hover-A);
    color:var(--base-font-color);
    line-height:1;
  }
  .g-header .nav-main-item-child_inner {
    display:flex;
    border-radius:var(--radius-B);
    background-color:rgba(var(--cc-gray-B-rgb),.9);
    padding:2.4rem 2.0rem 2.6rem;
    position:relative;
  }
  .g-header .nav-main-item-child_inner::before {
    content:"";
    margin-inline:auto;
    width:0;
    height:0;
    border-inline:.5rem solid transparent;
    border-bottom:.8rem solid rgba(var(--cc-gray-B-rgb),.9);
    position:absolute;
    bottom:100%;
    inset-inline:0;
  }
  .g-header .nav-main-item-child-item:not(:first-child) {
    margin-left:1.6rem;
    border-left:1px solid #fff;
    padding-left:1.6rem;
  }
  .g-header .nav-main-item-child-item > a {
    display:flex;
    align-items: center;
    gap:.8rem;
    position:relative;
  }
  .g-header .nav-main-item-child-item > a::after {
    content:"";
    display:block;
    width:100%;
    border-bottom:1px solid var(--cc-orange-A-hex);
    position:absolute;
    bottom:-.6rem;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: var(--duration-hover-A);
    opacity:0;
  }
  @media (hover) {
    .g-header .nav-main-item-child-item > a:hover {
      opacity:1;
    }
    .g-header .nav-main-item-child-item > a:hover::after {
      opacity:1;
    }
  }
  .g-header .nav-main-item-child-item .ja {
    padding-bottom:.25em;
    font-size:1.2rem;
    letter-spacing: .1em;
  }
  .g-header .nav-main-item-child-item .en {
    gap:.8rem;
    font-size:1.6rem;
    letter-spacing: .1em;
  }
  .nav-main-item-child:not(.is-accordion-active) {
    opacity:0;
    transform:translateY(-1em);
    pointer-events: none;
  }
  .g-header .nav-conversion {
    height:100%;
  }
  .g-header .nav-sub {
    grid-row:1/2;
    grid-column:2/3;
    grid-auto-flow: column;
    gap:1.5rem;
    margin-left:auto;
    font-size:1.2rem;
    letter-spacing: .05em;
  }
  .g-header .nav-sns {
    grid-row:1/2;
    grid-column:3/4;
    margin-bottom:-.2rem;
    margin-left:auto;
  }
  .g-header .nav-sns-item > a > i {
    background-color:var(--change-color);
    transition-property: background-color;
    transition-duration: var(--duration-hover-A);
  }
  .g-header .reservations {
    grid-row:2/4;
    grid-column:6/7;
  }
}
@media (width > 640px) and (width <= 1440px) {
  .g-header .nav-main {
    --gap: 1.0rem;
  }
}
@media (width <= 640px) {
  body.is-spmenu-open {
    overflow-y: hidden;
  }
  .g-header .logo-fixed {
    width:100%;
    height:var(--header-height);
    background-color:var(--cc-gray-A-hex);
    transition-property: background-color,box-shadow;
    transition-duration:var(--duration-hover-A);
  }
  body.is-scrolled:not(.is-spmenu-open) .g-header .logo-fixed {
    box-shadow:var(--shadow-A);
  }
  .g-header .logo-static > a {
    height:var(--logo-static-h);
  }
  .g-header .nav {
    border-inline:var(--body-padding) solid var(--cc-gray-A-hex);
    padding-top:5.0rem;
    width:100%;
    height:calc(100vh - var(--header-height));
    padding-bottom:calc(10.0rem +  var(--sp-fixed-height));
    background-color:rgba(var(--cc-gray-C-rgb),.95);
    position:fixed;
    top:var(--header-height);
    right:0;
    z-index: 1000;
    transition-property: opacity;
    transition-duration: var(--duration-hover-A);
    overflow-y:auto;
    overscroll-behavior: none;
    opacity:0;
    pointer-events:none;
  }
  .g-header .nav::before,
  .g-header .nav::after {
    content:"";
    display:block;
    width:calc(100% - var(--body-padding) * 2);
    height:calc(100vh - var(--header-height) - var(--sp-fixed-height));
    left:calc(var(--body-padding) - 1);
    background-color:var(--cc-gray-A-hex);
    position:fixed;
    top:var(--header-height);
    pointer-events: none;
    -webkit-mask-size:var(--radius-A);
    mask-size:var(--radius-A);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }
  body.is-spmenu-open .g-header .nav {
    opacity:1;
    pointer-events:auto;
  }
  .g-header .nav::before {
    -webkit-mask-image:
      url(/sapporo/assets/svg/reverse-radius-lt.svg),
      url(/sapporo/assets/svg/reverse-radius-rt.svg)
    ;
    mask-image:
      url(/sapporo/assets/svg/reverse-radius-lt.svg),
      url(/sapporo/assets/svg/reverse-radius-rt.svg)
    ;
    -webkit-mask-position:
      left top,
      right top
    ;
    mask-position:
      left top,
      right top
    ;
  }
  .g-header .nav::after {
    -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:
      calc(var(--logo-w) - var(--body-padding)) top,
      left calc(var(--logo-static-h) - var(--header-height))
    ;
    mask-position:
      calc(var(--logo-w) - var(--body-padding)) top,
      left calc(var(--logo-static-h) - var(--header-height))
    ;
    transition-property: transform,opacity;
    transition-duration: var(--duration-hover-A);
  }
  body.is-scrolled:not(.is-spmenu-open) .g-header .nav::after {
    transform:translateY(calc(var(--logo-static-h) * -1));
    opacity:0;
  }
  .g-header .language {
    align-items: center;
    height:var(--header-height);
    position:fixed;
    top:0;
    right:8.0rem;
    z-index: 1004;
    transition-property: background-color,color,height;
    transition-duration:var(--duration-hover-A);
  }
  .g-header .nav-main {
    font-size:1.8rem;
  }
  .g-header .nav-main-item {
    border-bottom:1px solid var(--cc-gray-A-hex);
  }
  .g-header .nav-main-item > :is(a,button) {
    display:flex;
    justify-content: center;
    align-items: center;
    padding-block:2.0rem;
    width:100%;
    line-height:1;
  }
  .g-header .nav-main-item > :is(a,button) :is(.m-i-af-arrow-A,.icon_plus) {
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color:var(--cc-orange-A-hex);
    width:2.0rem;
    height:auto;
    aspect-ratio: 1/1;
    position:absolute;
    right:2.0rem;
  }
  .g-header .js-header-secondmenu-button .icon_plus::before,
  .g-header .js-header-secondmenu-button .icon_plus::after {
    content:"";
    width:.8rem;
    height:1px;
    background-color:#fff;
    position:absolute;
    transition-property: transform;
    transition-duration: var(--duration-hover-A);
  }
  .g-header .js-header-secondmenu-button .icon_plus::after {
    transform:rotate(90deg);
  }
  .g-header .js-header-secondmenu-button[aria-expanded="true"] .icon_plus::before,
  .g-header .js-header-secondmenu-button[aria-expanded="true"] .icon_plus::after {
    transform:rotate(180deg);
  }
  .g-header .js-header-secondmenu-button[aria-expanded="true"] .m-i-af-arrow-A {
  }
  .g-header .js-header-secondmenu-target {
    overflow: hidden;
    position: relative;
  }
  .g-header .nav-main-item-child_inner {
    padding:.8rem 2.0rem 2.0rem;
  }
  .g-header .nav-main-item-child-item {
    background-color:rgba(var(--cc-black-A-rgb),.7);
    color:#fff;
    line-height:1;
  }
  .g-header .nav-main-item-child-item:not(:first-child) {
    border-top:1px solid var(--cc-gray-A-hex);
  }
  .g-header .nav-main-item-child-item:first-child {
    border-top-left-radius: var(--radius-B);
    border-top-right-radius: var(--radius-B);
  }
  .g-header .nav-main-item-child-item:last-child {
    border-bottom-left-radius: var(--radius-B);
    border-bottom-right-radius: var(--radius-B);
  }
  .g-header .nav-main-item-child-item > a {
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    gap:1.6rem;
    padding-block:2.0rem;
  }
  .g-header .nav-main-item-child-item > a .ja {
    font-size:1.4rem;
    letter-spacing: .2em;
  }
  .g-header .nav-main-item-child-item > a .en {
    gap:1.6rem;
    font-size:1.8rem;
    letter-spacing: .2em;
    position:relative;
  }
  .g-header .nav-main-item-child-item > a .en .m-i-af-arrow-A {
    margin-top:-.25em;
    position:absolute;
    left:calc(100% + 1.2rem);
  }
  .g-header .js-header-secondmenu-target[aria-hidden="true"] {
    height:0;
  }
  .g-header .js-header-secondmenu-target[aria-hidden="false"] {
    z-index:1;
  }
  .g-header .nav-sub {
    gap:1.6rem;
    margin-top:4.8rem;
    padding-left:4.0rem;
    font-size:1.4rem;
    letter-spacing: .05em;
  }
  .g-header .nav-sns {
    gap:4.0rem;
    margin-top:4.0rem;
    justify-content: center;
  }
  .g-header .nav-sns-item > a > i {
    background-color:var(--base-font-color);
  }

  .g-sp-global_menu-button {
    display:flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    width:var(--header-height);
    height:var(--header-height);
    position:fixed;
    top:0;
    right:0;
    z-index: 1001;
  }
  .g-sp-global_menu-button > i {
    border-radius:100px;
    width:1.8rem;
    height:2px;
    background-color:var(--base-font-color);
    position:relative;
    transition-duration: var(--duration-hover-A);
    transition-property: background-color;
  }
  .g-sp-global_menu-button > i::before,
  .g-sp-global_menu-button > i::after {
    content:"";
    display:block;
    border-radius:1px;
    width:100%;
    height:100%;
    background-color:var(--base-font-color);
    position:absolute;
    transition-property: transform,background-color;
    transition-duration: var(--duration-hover-A);
  }
  .g-sp-global_menu-button > i::before {
    top:-6px;
  }
  .g-sp-global_menu-button > i::after {
    bottom:-6px;
  }
  body.is-spmenu-open .g-sp-global_menu-button > i {
    background-color:transparent;
  }
  body.is-spmenu-open .g-sp-global_menu-button > i::before {
    transform:translateY(6px) rotate(45deg);
  }
  body.is-spmenu-open .g-sp-global_menu-button > i::after {
    transform:translateY(-6px) rotate(-45deg);
  }
  .g-header .reservations {
    grid-template-columns:repeat(2,1fr);
    gap:.5rem;
    width:100%;
    padding-block:var(--body-padding) calc(var(--body-padding) + env(safe-area-inset-bottom));
    padding-inline:var(--body-padding);
    position:fixed;
    left:0;
    bottom:env(safe-area-inset-bottom);
    z-index:1003;
    transition-property: transform,background-color;
    transition-duration: var(--duration-hover-A);
  }
  body.is-spmenu-open .g-header .reservations {
    background-color:var(--cc-gray-A-hex);
  }
  body:has(.l-lowerpage-kv-A):not(.is-scrolled) .g-header .reservations {
    background-color:var(--cc-gray-A-hex);
  }
  body:not(.is-scrolled,:has(.l-lowerpage-kv-A)):not(.is-spmenu-open) .g-header .reservations {
    transform:translateY(100%);
  }
  .g-header .reservations::before {
    content:"";
    width:calc(100% - var(--body-padding) * 2);
    height:var(--radius-A);
    background-color:var(--cc-gray-A-hex);
    position:absolute;
    left:var(--body-padding);
    bottom:100%;
    -webkit-mask-size:var(--radius-A);
    mask-size:var(--radius-A);
    -webkit-mask-image:
      url(/sapporo/assets/svg/reverse-radius-rb.svg),
      url(/sapporo/assets/svg/reverse-radius-lb.svg)
    ;
    mask-image:
      url(/sapporo/assets/svg/reverse-radius-rb.svg),
      url(/sapporo/assets/svg/reverse-radius-lb.svg)
    ;
    -webkit-mask-position:
      right bottom,
      left bottom
    ;
    mask-position:
      right bottom,
      left bottom
    ;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    transition-property: opacity,transform;
    transition-duration: var(--duration-hover-A);
    pointer-events: none;
  }
  body:not(.is-spmenu-open) .g-header .reservations::before {
    opacity:0;
    transform:translateY(100%);
  }
  .g-header .reservations .l-reservation-button-A {
    width:auto;
  }
}

/* TopicPath
----------------------------------------------------------------------------- */
.g-topicpath {
  --topicpath-pd:2.0rem;
  display:flex;
  align-items: center;
  padding-inline-start:var(--topicpath-pd);
  height:5.0rem;
  font-size:1.3rem;
  line-height:1.5;
  letter-spacing: .08em;
  overflow-x:auto;
  position:absolute;
  z-index:10;
}
.g-topicpath > .item {
  flex-shrink: 0;
  vertical-align: middle;
}
.g-topicpath > .item:not(:first-child)::before {
  content:"";
  display:inline-block;
  margin-bottom:0.2rem;
  margin-inline:0.6rem;
  border-block-start:1px solid var(--cc-orange-A-hex);
  border-inline-end:1px solid var(--cc-orange-A-hex);
  width:0.6rem;
  height:0.6rem;
  transform:rotate(45deg);
}
.g-topicpath > .item:first-child a {
  display:flex;
  align-items: center;
  gap:.3em;
  padding-bottom:.05em;
}
.g-topicpath > .item a {
  transition:color var(--duration-hover-A);
}
.g-topicpath > .item:last-child {
  padding-inline-end:var(--topicpath-pd);
}
.g-topicpath > .item:not(:last-child) > :is(a) {
  text-decoration: underline;
  text-underline-offset: 0;
}
@media (width > 640px) {
  .g-topicpath {
    margin-inline:auto;
    width:130.0rem;
    inset-inline:0;
  }
}
@media (width <= 640px) {
  .g-topicpath {
    --topicpath-pd:2.0rem;
    width:100%;
    font-size:1.2rem;
  }
  .l-lowerpage-kv-B + .g-topicpath {
    width:fit-content;
    padding-left:0;
    max-width:calc(100% - var(--logo-w));
    top:var(--header-height);
    right:0;
  }
}


/* Bottom Copy
----------------------------------------------------------------------------- */
.g-bottom_copy {
  display:flex;
  justify-content: center;
  align-items: center;
  height:35.0rem;
}
.g-bottom_copy .p-ff-bellefair {
  font-size:2.4rem;
  letter-spacing: .12em;
}
@media (width > 640px) {
}
@media (width <= 640px) {
  .g-bottom_copy {
    height:18.0rem;
  }
  .g-bottom_copy .p-ff-bellefair {
    font-size:1.6rem;
    letter-spacing: .1em;
  }
}


/* Footer
----------------------------------------------------------------------------- */
.g-footer {
  background-color:#000;
  color:#fff;
}
.g-footer .upper {
  display:flex;
  flex-direction: column;
  align-items: center;
  padding-block:12.0rem 6.0rem;
  position:relative;
  z-index: 1;
}
.g-footer .upper-hotel_name {
  margin-top:5.6rem;
  font-size:2.0rem;
  line-height:1;
  letter-spacing: .1em;
}
.g-footer .upper-address {
  display:flex;
  gap:1em;
  margin-top:2.4rem;
  font-size:1.7rem;
  line-height:1;
  letter-spacing: .08em;
}
.g-footer .upper-address > a {
  font-size:1.2rem;
  letter-spacing: .03em;
  text-decoration: underline;
  text-underline-offset: .05em;
}
@media (hover) {
  .g-footer .upper-address > a:hover {
    text-decoration: none;
  }
}
.g-footer .upper-tel {
  margin-top:4.0rem;
  font-size:3.4rem;
  line-height:1;
  letter-spacing: .2em;
  color:var(--cc-gold-A-hex);
}
.g-footer .upper-bg {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index: -1;
  pointer-events: none;
}
.g-footer .upper-hotels {
  display:grid;
  gap:3.0rem;
  margin-top:6.0rem;
  font-size:1.4rem;
}
.g-footer .upper-hotels-item > a {
  display:flex;
  align-items: center;
  gap:.8rem;
}
.g-footer .upper-hotels-item > a > span {
  padding-bottom:.15em;
}
.g-footer .upper-hotels-item > a::before {
  width:1.2rem;
  background-color:var(--cc-gold-A-hex);
}
.g-footer .upper-tsukurite {
  margin-top:6.0rem;
}
.g-footer .lower {
  padding-block:4.0rem 3.2rem;
  font-size:1.2rem;
  letter-spacing: .05em;
  line-height:1;
}
.g-footer .lower-links {
  display:grid;
  line-height:1.5;
}
.g-footer .lower-copyright {
  margin-top:3.6rem;
  text-align: center;
}
@media (width > 640px) {
  .g-footer .upper-address {
    align-items:baseline;
  }
  .g-footer .upper-hotels {
    grid-auto-flow: column;
  }
  .g-footer .lower-links {
    grid-auto-flow: column;
    justify-content: center;
  }
  .g-footer .lower-links-item:not(:first-child) {
    margin-left:3.0rem;
    padding-left:calc(3.0rem + 1px);
    position:relative;
  }
  .g-footer .lower-links-item:not(:first-child)::before {
    content:"";
    height:1em;
    border-left:1px solid;
    position:absolute;
    top:.25em;
    left:0;
  }
}
@media (width <= 640px) {
  .g-footer {
    padding-bottom:var(--sp-fixed-height);
  }
  .g-footer .upper {
    padding-block:8.0rem 6.0rem;
  }
  .g-footer .upper-hotel_name {
    margin-top:4.0rem;
    font-size:1.5rem;
  }
  .g-footer .upper-address {
    flex-direction: column;
    gap:1.2em;
    margin-top:2.0rem;
    font-size:1.4rem;
    text-align: center;
  }
  .g-footer .upper-address > a {
    font-size:1.2rem;
    letter-spacing: .03em;
    text-decoration: underline;
    text-underline-offset: .05em;
  }
  .g-footer .upper-tel {
    margin-top:4.0rem;
    font-size:3.4rem;
    letter-spacing: .15em;
  }
  .g-footer a {
    pointer-events: auto;
  }
  .g-footer .upper-bg {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index: -1;
    pointer-events: none;
  }
  .g-footer .upper-hotels {
    grid-template-columns: repeat(3,auto);
    justify-content: space-between;
    gap:.8rem 0;
    margin-top:4.4rem;
    width:31.0rem;
    font-size:1.2rem;
  }
  .g-footer .upper-hotels-item.-sp_col_1 {
    grid-column:1/4;
  }
  .g-footer .upper-hotels-item > a {
    gap:.4rem;
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .g-footer .upper-hotels-item > a > span {
    padding-bottom:.3em;
  }
  .g-footer .upper-hotels-item > a::before {
    width:.9rem;
  }
  .g-footer .upper-tsukurite {
    margin-top:4.4rem;
  }
  .g-footer .lower {
    padding-block:3.6rem 2.0rem;
    font-size:1.2rem;
    letter-spacing: .05em;
    line-height:1;
  }
  .g-footer .lower-links {
    gap:1.4rem;
    padding-inline:3.0rem;
    line-height:1.5;
  }
  .g-footer .lower-links-item > a {
    display:flex;
    align-items: center;
    gap:.6rem;
    text-decoration: underline;
  }
  .g-footer .lower-links-item > a::before {
    content:"";
    display:block;
    width:.4rem;
    height:.5rem;
    background-color:#fff;
    clip-path:polygon(0 0, 100% 50%, 0 100%);
  }
  .g-footer .lower-copyright {
    font-size:1.0rem;
  }
}


/* Pagetop
----------------------------------------------------------------------------- */
.g-pagetop_button {
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius:var(--radius-B);
  width:5.0rem;
  height:auto;
  background-color:var(--cc-green-A-hex);
  aspect-ratio: 1/1;
  z-index:500;
  position:fixed;
  bottom:var(--body-padding);
  right:var(--body-padding);
  transform:translateY(calc(100% + var(--body-padding)));
  transition-property: transform,opacity;
  transition-duration: var(--duration-hover-A);
  transition-timing-function: var(--ttf-eo-cubic);
}
body.is-scrolled .g-pagetop_button {
  transform:translateY(0);
}
.g-pagetop_button::before {
  content:"";
  display:block;
  margin-top:0.6rem;
  border-top:2px solid #fff;
  border-left:2px solid #fff;
  width:1.2rem;
  height:1.2rem;
  transform:rotate(45deg);
}
@media (width <= 640px) {
  .g-pagetop_button {
    bottom:calc(var(--sp-fixed-height));
    transform:translateY(calc(100% + var(--sp-fixed-height)));
  }
  body.is-scroll-end .g-pagetop_button {
    transform:translateY(-6.5rem);
  }
}


/* Reserv Form
============================================================================= */
.g-reserve_form-A {
  font-weight:700;
}
.g-reserve_form-A > .search {
  border-bottom:1px solid #fff;
  padding-bottom:3.0rem;
  color:var(--cc-black-B-hex);
}
.g-reserve_form-A > .search .select_wrap {
  display:flex;
  align-items: center;
  gap:.8rem;
}
.g-reserve_form-A > .search .select {
  border-radius:var(--radius-C);
  background-color:#fff;
  border:1px solid;
  position:relative;
}
.g-reserve_form-A > .search .select::after {
  content:"";
  display:block;
  margin-block:auto;
  width:.8rem;
  height:auto;
  aspect-ratio: 1/1;
  background-color:var(--cc-black-B-hex);
  pointer-events: none;
  position:absolute;
  inset-block:0;
  right:.9rem;
  transform:rotate(90deg);
  -webkit-mask-image:url(/sapporo/assets/svg/arrow-a.svg);
  mask-image:url(/sapporo/assets/svg/arrow-a.svg);
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100%;
  mask-size:100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.g-reserve_form-A > .search .select > select {
  cursor: pointer;
  padding-inline:1.6rem 3.0rem;
  padding-bottom:.1em;
  letter-spacing: 0;
}
.g-reserve_form-A > .search .ui-datepicker-trigger {
  cursor: pointer;
  width:13px;
  height:13px;
}
.g-reserve_form-A > .search .submit {
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom:.1em;
  width:10.0rem;
  letter-spacing: .1em;
}
.g-reserve_form-A > .links {
  display:flex;
}
.g-reserve_form-A .links-main {
  display:flex;
  align-items: center;
  gap:6.0rem;
}
.g-reserve_form-A .links-sub {
  display:flex;
  align-items: center;
  gap:4.0rem;
}
.g-reserve_form-A > .reserve {
  display:flex;
  flex-direction: column;
  border-radius:.4rem;
  line-height:1;
  color:#fff;
  background-color:var(--cc-green-A-hex);
  position:relative;
  transition-property: background-color;
  transition-duration: var(--duration-hover-A);
}
.g-reserve_form-A > .reserve .main {
  font-size:2.0rem;
  font-weight:700;
  letter-spacing: .1em;
}
.g-reserve_form-A > .reserve .sub {
  margin-top:1.8rem;
  font-size:1.2rem;
  font-weight:500;
  letter-spacing: 0;
}
@media (hover) {
  .g-reserve_form-A > .reserve:hover {
    background-color:var(--cc-green-B-hex);
  }
}
.g-reserve_form-A > .reserve::after {
  content:"";
  margin-block:auto;
  position:absolute;
  inset-block:0;
  right:1.6rem;
}
@media (width > 640px) {
  .g-reserve_form-A {
    display:grid;
    grid-template-columns:1fr 25.0rem;
    column-gap:7.0rem;
  }
  .g-reserve_form-A > .search {
    display:flex;
    align-items: center;
    grid-auto-flow: column;
    gap:2.0rem;
  }
  .g-reserve_form-A > .search .select select {
    min-width:7.2rem;
  }
  .g-reserve_form-A > .search .submit {
    margin-left:auto;
  }
  .g-reserve_form-A > .search .submit::after {
    content:none;
  }
  .g-reserve_form-A > .links {
  }
  .g-reserve_form-A > .reserve {
    grid-row:1/3;
    grid-column:2/3;
  }
  .g-reserve_form-A > .search .ui-datepicker-trigger {
    margin-left:-1.0rem;
  }
  .g-reserve_form-A > .links {
    align-items: center;
    justify-content: space-between;
    padding-top:3.0rem;
  }
  .g-reserve_form-A > .reserve {
    align-items: center;
    padding-top:1.8rem;
  }
  .g-reserve_form-A > .reserve .main {
    margin-top:1.0rem;
  }
}
@media (width <= 640px) {
  .g-reserve_form-A {
  }
  .g-reserve_form-A > .search {
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
    row-gap:2.0rem;
    border-bottom-color:var(--cc-gray-C-hex);
    padding-bottom:4.0rem;
    font-size:1.6rem;
  }
  .g-reserve_form-A > .search .select_wrap {
    gap:.4rem;
  }
  .g-reserve_form-A > .search .select_wrap .append {
    font-size:1.5rem;
  }
  #ui-datepicker-div {
    left:2.0rem !important;
    width:calc(100% - 4.0rem) !important;
    transform:translateY(100%);
  }
  #ui-datepicker-div > .ui-datepicker-group {
    width:100% !important;
    float:none !important;
  }
  .g-reserve_form-A > .search .submit {
    margin-top:1.0rem;
    margin-inline:auto;
    width:18.0rem;
    height:4.5rem;
    position:relative;
  }
  .g-reserve_form-A > .search .submit::after {
    position:absolute;
    right:1.4rem;
  }
  .g-reserve_form-A > .links {
    flex-direction: column;
    padding-top:3.2rem;
  }
  .g-reserve_form-A .links-main {
    gap:0;
    justify-content: space-between;
  }
  .g-reserve_form-A .links-sub {
    gap:2.0rem;
    margin-top:1.6rem;
  }
  .g-reserve_form-A > .reserve {
    justify-content: center;
    margin-top:3.2rem;
    padding-left:8.0rem;
    height:7.5rem;
  }
  .g-reserve_form-A > .reserve::before {
    width:3.8rem;
    position:absolute;
    left:1.6rem;
  }
  .g-reserve_form-A > .reserve .main {
    margin-top:0;
    font-size:1.7rem;
    font-weight:500;
  }
  .g-reserve_form-A > .reserve .sub {
    margin-top:.8rem;
    font-size:1.1rem;
  }
}


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

@media (width > 640px) {
}
@media (width <= 640px) {
}