@charset "UTF-8";

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

Global CSS

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

上記はここに記述する

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

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

/* Header
----------------------------------------------------------------------------- */
body.is-global_menu-open .g-header {
}
body.is-scrolled:not(.is-global_menu-open) .g-header {
}
@media (width > 640px) {
  body:has(.l-lowerpage-header-A,.top-kv) {
    .g-header {
      .logo {
        > a {
          &::before {
            content:"";
            background-image:url(/sapporo/assets/img/common/logo_header_reverse.svg);
            background-size:contain;
            background-repeat:no-repeat;
            background-position:center;
            position:absolute;
            inset:0 4.8rem;
            transition-property: opacity;
            transition-duration:var(--duration-hover-A);
            pointer-events: none;
            opacity:0;
          }
        }
      }
    }
    .g-floating_conversion {
      position:relative;
      &::after {
        content:"";
        margin-inline:auto;
        width:1px;
        background-color:var(--cc-gray_line-A);
        position:absolute;
        inset:0;
        pointer-events:none;
        transition-property: opacity;
        transition-duration:var(--duration-hover-A);
        opacity:0;
      }
    }
    &:is(.is-scrolled) {
      .g-header {
        --base-color:var(--cc-black-A);
        --base-bg:var(--cc-white-A);
        --base-color-reverse:var(--cc-white-A);
        --base-bg-reverse:var(--cc-black-A);
      }
    }
    &:not(.is-scrolled) {
      .g-header {
        --base-color:var(--cc-white-A);
        --base-bg:transparent;
        --base-color-reverse:var(--cc-black-A);
        --base-bg-reverse:var(--cc-white-A);
        &::before {
        }
        .logo {
          > a {
            &::before {
              opacity:1;
            }
            img {
              opacity:0;
            }
          }
        }
        &:has(.header-submenu[aria-hidden="false"]) {
          --base-color:var(--cc-black-A);
          --base-bg:var(--cc-white-A);
        }
        &:not(:has(.header-submenu[aria-hidden="false"])) .g-floating_conversion {
          border-inline:1px solid var(--cc-gray_line-A);
          &::after {
            opacity:1;
          }
          .link {
            background-color:transparent !important;
          }
        }
      }
    }
  }
}
@media (width > 640px) {
  body:has(.top-kv):not(.is-scrolled)
	.g-header:not(:has(.header-submenu[aria-hidden="false"]))
	.g-floating_conversion {
    border-inline: none;
    &::after {
      opacity: 0;
    }
    .link.p-bg-black-A {
      background-color: var(--cc-black-A) !important;
    }
    .link.p-bg-red-A {
      background-color: var(--cc-red-A) !important;
    }
	}
}

.g-header {
  display:flex;
  align-items: center;
  width:100%;
  height:var(--header-height);
  line-height:1;
  color:var(--base-color);
  z-index: 1000;
  position:fixed;
  top:0;
  transition-property:background-color,color;
  transition-duration:var(--duration-hover-A);
  transition-timing-function: var(--ttf-eio-sine);
  will-change:background-color,color;

  @media (width > 640px) {
    padding-right:calc(var(--header-height));
    min-width:var(--pc-min-width);
    &::before {
      content:"";
      display:block;
      background-color:var(--base-bg);
      position:absolute;
      inset:0;
      z-index:-1;
      transition-property:background-color,opacity;
      transition-duration:var(--duration-hover-A);
      transition-timing-function: var(--ttf-eio-sine);
    }
  }
  @media (width <= 640px) {
    gap:.5rem;
    background-color:var(--base-bg);
  }

  .logo {
    flex-shrink: 0;
    height:100%;
    @media (width <= 640px) {
    }

    > a {
      display:flex;
      align-items: center;
      padding-inline:4.8rem;
      height:100%;
      position:relative;
      @media (width <= 640px) {
        padding-inline:2.0rem;
      }

      img {
        transition-property: opacity;
        transition-duration:var(--duration-hover-A);
      }
    }
  }

  .header-menu {
    @media (width > 640px) {
      display:grid;
      justify-items: flex-end;
      gap: 1.6rem;
      margin-left:auto;
      padding-right:4.0rem;
    }
    @media (width <= 640px) {
      margin-inline:auto 7.8rem;
    }
  }

  .top {
    @media (width > 640px) {
      display:flex;
      align-items: center;
      gap:2.2rem;
    }
    @media (width <= 640px) {
    }
  }
  .top-list {
    font-size:1.1rem;
    line-height:1;
    letter-spacing: .2em;
    @media (width > 640px) {
      display:flex;
      gap:1.2em;
    }
    @media (width <= 640px) {
    }
    a {
      display:block;
      padding-bottom:.1em;
    }
  }
  .top-lang {
    display:flex;
    align-items: flex-start;
    z-index: 1;
    &:not(.is-active) {
      .js-lang-list {
        opacity:0;
        pointer-events:none;
        transform:translateY(-1.2rem);
      }
    }
    &:is(.is-active) {
      .js-lang-button::after {
        transform:scaleY(-1);
      }
    }
    .js-lang-button {
      display:flex;
      align-items: center;
      gap:.8rem;
      font-size:1.2rem;
      line-height:1;
      letter-spacing: .05em;

      &::after {
        transition-property: transform;
        transition-duration: var(--duration-hover-A);
      }
    }
    .js-lang-list {
      padding-top:.8rem;
      margin-top:1.2rem;
      position:absolute;
      z-index: 100;
      transition-property: transform,opacity;
      transition-duration: var(--duration-hover-A);

      .gtranslate_wrapper {
        display:flex;
        padding:1.0rem 1.2rem;
        background-color: #fff;
        border:1px solid #B3B3B3;
        border-radius:3px;
        font-size:1.2rem;
        @media (width <= 640px) {
          flex-direction: column;
          line-height:1.7;
        }

        a {
          font-weight:400 !important;
          &:is(.gt-current-lang) {
            color:var(--cc-black-A);
          }
          &:not(.gt-current-lang) {
            color:#B3B3B3;
          }
          @media (width > 640px) {
            &:not(:first-child) {
              &::before {
                content:"/";
                margin-inline:.5em;
                color:#B3B3B3;
                pointer-events: none;
              }
            }
          }
        }

      }
    }
  }

  .bottom {
    @media (width > 640px) {
      display:flex;
    }
  }
  .bottom-list {
    @media (width > 640px) {
      display:flex;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .12em;
    }
    > li {
      @media (width > 640px) {
        &:not(:first-child) {
          margin-left:2.0rem;
          padding-left:calc(2.0rem + 1px);
          position:relative;
          &::before {
            flex:.5;
            content:"";
            margin-left:auto;
            border-left:1px solid;
            height:100%;
            position:absolute;
            top:.1em;
            left:0;
          }
        }
      }
      > a.js-header_submenu-button[aria-expanded="true"] {
        text-decoration: underline;
        text-underline-offset: 1px;
      }
    }
  }

  .header-submenu_wrap {
    width:100%;
    height:100lvh;
    position:absolute;
    top:0;
    left:0;
    z-index: -2;
    background-color:rgba(0,0,0,.2);
    backdrop-filter:blur(10px);
    transition-property: opacity;
    transition-duration: var(--duration-hover-A);
    transition-timing-function: var(--ttf-eio-sine);
    pointer-events:none;
    opacity:0;
    &:has(.header-submenu[aria-hidden="false"]) {
      pointer-events:auto;
      opacity:1;
    }
  }
  .header-submenu {
    width:100%;
    padding-block:5.6rem;
    border-top:2px solid var(--cc-gray_line-A);
    color:var(--cc-black-A);
    background-color:#fff;
    position:absolute;
    top:calc(var(--header-height) - 1px);
    left:0;
    transition-property: transform,opacity;
    transition-duration: var(--duration-hover-A);
    transition-timing-function: var(--ttf-eio-sine);
    &:is([aria-hidden="true"]) {
      transform:translateY(calc((var(--header-height) + 100%) * -1));
    }

    > .inner {
      display:grid;
      grid-template-columns:19.5rem 1fr;
      column-gap:12.5rem;
    }

    .submenu_heading {
      border-right:1px solid var(--cc-gray_line-A);
      font-size:2.0rem;
      line-height:1;
      letter-spacing: .12em;
    }
    .submenu_list {
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap:5.6rem;

      .item {
        > a {
          display:grid;
          gap:1.6rem;
          font-size:1.6rem;
          line-height:1;
          letter-spacing: .12em;
          text-underline-offset:1px;
          text-decoration: underline;

          @media(hover:hover) {
            &:hover {
              text-decoration: none;
              img {
                transform:scale(1.05);
              }
            }
          }

          .img {
            overflow:hidden;
          }
          img {
            width:100%;
            transition-property: transform;
            transition-duration: var(--duration-hover-A);
          }
        }
      }
    }
  }
}
/* グロナビ展開ボタン */
.g-header_menu-btn {
  flex-shrink: 0;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:1.2rem;
  width:var(--header-height);
  height:var(--header-height);
  position:absolute;
  top:0;
  right:0;

  @media (width <= 640px) {
  }

  .bar {
    display:flex;
    justify-content: center;
    align-items: center;
    width:4.0rem;
    height:.8rem;
    position:relative;
    &::before,
    &::after {
      content:"";
      display:block;
      width:calc(100% - 2px);
      height:1px;
      background-color:var(--base-color);
      position:absolute;
      transition-property:background-color,transform;
      transition-duration:var(--duration-hover-A);
      will-change:background-color,transform;
      transition-timing-function: var(--ttf-eio-expo);

      @media (width <= 640px) {
      }
    }
    &::before {
      transform:translateY(-.4rem);
    }
    &::after {
      transform:translateY(.4rem);
    }
  }
  .p-ff-castoro {
    font-size:1.2rem;
    line-height:1;
    letter-spacing: .09em;
  }

  &.-close .bar::before {
    transform:rotate(-212.5deg);
  }
  &.-close .bar::after {
    transform:rotate(212.5deg);
  }
  body:is(.is-global_menu-open) & {
    .bar::before {
      transform:rotate(-212.5deg);
    }
    .bar::after {
      transform:rotate(212.5deg);
    }
  }
}

/* Global Menu */
body:not(.is-global_menu-open) {
  .g-global_menu {
    opacity:0;
    pointer-events:none;
  }
}
.g-global_menu {
  background-color:#fff;
  width:100%;
  height:100lvh;
  position:fixed;
  top:0;
  left:0;
  overscroll-behavior: contain;
  transition-timing-function: opacity;
  transition-duration:var(--duration-hover-A);
  @media (width > 640px) {
    z-index: 1500;
  }
  @media (width <= 640px) {
    height:calc(100lvh - var(--header-height) + 1px);
    top:calc(var(--header-height) - 1px);
    z-index: 999;
  }

  .g-header_menu-btn {
    position:fixed;
    top:0;
    right:0;
  }

  .inner {
    @media (width > 640px) {
      display:grid;
      justify-content: space-between;
      grid-template-columns:29.3rem auto;
      grid-template-rows:auto 1fr auto;
      padding-block:8.0rem;
    }
    @media (width <= 640px) {
      padding: 4.0rem 2.8rem 20.0rem 2.8rem;
    }
  }

  .logo {
    @media (width > 640px) {
      grid-row:1/2;
      grid-column:1/2;
    }
  }

  .links {
    @media (width > 640px) {
      grid-row:1/-2;
      grid-column:2/3;
      display:grid;
      grid-template-columns: repeat(3,1fr);
      column-gap:12.0rem;
    }
  }
  .links-main {
    @media (width > 640px) {
      display:flex;
      flex-direction: column;
      gap:2.0rem;
    }
    &.-top {
      @media (width > 640px) {
        grid-column:1/-1;
        margin-bottom:2.8rem;
      }
    }
    .main-item {
      @media (width <= 640px) {
        border-bottom:1px solid var(--cc-gray_line-A);
      }
      > :is(a,button) {
        font-size:1.8rem;
        letter-spacing: .16em;
        line-height:1.8;
        @media (hover:hover) {
          &:hover {
            text-decoration: none;
          }
        }
        @media (width <= 640px) {
          display:flex;
          justify-content: space-between;
          align-items: center;
          padding-block:1.6rem .8rem;
          width:100%;
          font-size:1.8rem;
        }
        &::after {
          @media (width > 640px) {
            content:none;
          }
          @media (width <= 640px) {
            margin-right:.2rem;
            width:1.2rem;
          }
        }
      }
      > :is(a) {
        @media (width > 640px) {
          text-decoration: underline;
        }
      }
      > :is(button) {
        color: var(--cc-red-A);
        @media (width > 640px) {
          transition: opacity 0.5s;
        }
        &:hover {
          opacity: 0.6;
        }

        > i {
          @media (width > 640px) {
            display:none;
          }
          @media (width <= 640px) {
            margin-right:.2rem;
          }
        }
      }
      span {
        @media (width > 640px) {
          text-decoration: underline;
        }
        @media (width <= 640px) {
        }
      }
    }
  }
  .links-sub_wrap {
    > div {
      padding-top:1.2rem;
      @media (width <= 640px) {
        padding-block:1.6rem;
      }
    }
  }
  .links-sub {
    display:grid;
    gap:.4rem;
    font-weight:500;
    font-size:1.6rem;
    line-height:2;
    letter-spacing: .12em;
    color:var(--cc-gray_text-A);
    @media (width <= 640px) {
    }

    .sub-item {
      &.-indent {
        padding-left:1em;
      }
      > a {
        display:flex;
        align-items: center;
        gap:.8rem;
        @media (width <= 640px) {
          justify-content: space-between;
          font-size: 1.4rem;
        }

        &::after {
          background-color:var(--cc-gray_text-A);
          @media (width <= 640px) {
            margin-right:.2rem;
          }
        }
      }
    }
  }

  .cvs {
    @media (width > 640px) {
      grid-row:1/2;
      grid-column:1/2;
      display:flex;
      flex-direction:column;
      position:sticky;
      top:9.0rem;
    }
    @media (width <= 640px) {
      margin-top:6.4rem;
    }
    .logo {
      margin-bottom:auto;
    }
    .name_access {
      margin:5.6rem 0 3.6rem;
      .name {
        margin-bottom:.8rem;
        font-size:1.8rem;
        line-height:1.8;
        letter-spacing: .16em;
      }
      .address {
        font-size:1.3rem;
        line-height:2.1;
        letter-spacing: .12em;
      }
    }
    .cvs-links {
      display:flex;
      flex-direction: column;
      gap:2.2rem;
      margin-bottom:5.6rem;

      .l-button-A {
        margin-inline:0;
        min-width:17.2rem;
        letter-spacing: .1em;
        width:fit-content;
        gap:0;

        &[href*="/sapporo/inquiry/form/?type=restaurant"] {
          width:20.0rem;
        }
      }
    }
    .cvs-bnr {
      display:flex;
      justify-content: center;
      align-items: center;
      width:100%;
      position:relative;
      @media (hover:hover) {
        &:hover {
          &::before {
            opacity:0;
          }
        }
      }
      &::before {
        content:"";
        background-color:#000;
        opacity:.4;
        position:absolute;
        inset:0;
        transition-property: opacity;
        transition-duration: var(--duration-hover-A);
      }
      &::after {
        background-color:#fff;
        position:absolute;
        right:2.4rem;
      }
      > span {
        position:absolute;
        font-size:1.6rem;
        letter-spacing: .12em;
        color:#fff;
      }
      picture {
        width:100%;
      }
    }
  }
  .other {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-top:4.0rem;
    }
  }
  .other-list {
    font-size:1.4rem;
    line-height:2;
    letter-spacing: .12em;
    @media (width > 640px) {
      display: flex;
      flex-direction: column;
      gap: 1.0rem;
      margin-bottom: 3.4rem;
    }
    @media (width <= 640px) {
      display:grid;
      justify-items:flex-start;
      row-gap:1.2rem;
      grid-template-columns:1fr 1fr;
      font-size:1.3rem;
    }
    > li {
      width: fit-content;
      border-bottom:1px solid;
    }
  }
  .links-main .main-item a.other-sns {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    padding-block:.6rem;
    gap:.6rem;
    font-size:1.5rem;
    line-height:1;
    letter-spacing: .07em;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-top:3.2rem;
      font-size:1.3rem;
    }
  }


  .simplebar-content-wrapper {
    overscroll-behavior: contain;
  }
  .simplebar-track.simplebar-vertical {
    background-color:var(--cc-gray_line-A);
    width:2px;
    @media (width > 640px) {
      margin-top:12.0rem;
      height:calc(100lvh - 12.0rem);
      right:calc(4.4rem - 1px);
      opacity:1;
    }
    @media (width <= 640px) {
      right:1.0rem;
    }
    .simplebar-scrollbar {
      width:100%;
      background-color:var(--cc-red-A);
      &::after {
        content:none;
      }
    }
  }

}
body.is-global_menu-open {
  .talkappibot {
    opacity:0 !important;
    pointer-events: none;
  }
}

.g-floating_conversion {
  display:flex;
  font-size:1.4rem;
  line-height:1;
  letter-spacing: .15em;

  @media (width > 640px) {
    width:calc(19.2rem * 2);
    height:var(--header-height);
  }
  @media (width <= 640px) {
    flex-wrap:wrap;
    height:calc(8.2rem + env(safe-area-inset-bottom));
    width:100%;
    position:fixed;
    bottom:0;
    z-index: 1000;
    background-color: var(--cc-white-A);

    body:has(&) .g-footer {
      padding-bottom:calc(8.0rem + env(safe-area-inset-bottom));
    }
  }

  .sp_header {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:1.2rem;
    width:100%;
    height:3.0rem;
    line-height:1;
    .p-ff-castoro {
      display:flex;
      align-items: center;
      gap:.4rem;
      font-size:1.3rem;
      letter-spacing: .26em;

      &::before {
        background-color:var(--cc-gold-A);
      }
    }
    .p-ff-min {
      padding-bottom:.1rem;
      font-size:1.2rem;
      letter-spacing: .16em;
      @media (width <= 640px) {
        font-size: 1.1rem;
      }
    }
  }
  .link {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:2.4rem;
    height:100%;
    position:relative;
    @media (width > 640px) {
      flex:1;
      transition-duration:var(--duration-hover-A);
      transition-property: background-color,color,opacity;
    }
    @media (width <= 640px) {
      box-sizing:content-box;
      padding-bottom:env(safe-area-inset-bottom);
      width: calc((100% - 5.0rem) / 2);
      /* height:calc(100% - 3.0rem); */
      height: 5.0rem;
      gap: 1.6rem;
      font-size: 1.2rem;

      transition: width 0.5s;
      body:not(.is-scrolled) & {
        width: calc((100% - 0.0rem) / 2);
      }
    }
    > span {
      padding-bottom:.15em;
    }
  }
}

/* 英語のみ */
html[lang="en"] .g-floating_conversion .link {
  gap: 1.6rem;
}
html[lang="en"] .g-floating_conversion .link > span {
  width: 10.5rem;
}


/* TopicPath
----------------------------------------------------------------------------- */
.g-topicpath {
  --topicpath-pd:2.0rem;
  padding-inline-start:var(--topicpath-pd);
  font-family:var(--ff-serif);
  font-size:1.1rem;
  line-height:1;
  letter-spacing: .20em;
  overflow-x:auto;
  z-index:10;

  @media (width > 640px) {
    border-top:1px solid var(--cc-gray_line-A);
  }
  @media (width <= 640px) {
    --topicpath-pd:3.0rem;
    position:absolute;
    width:100%;
    top:var(--header-height);
  }

  > .inner {
    display:flex;
    align-items: center;
    height:var(--topicpath-height);
    @media (width > 640px) {
      margin-inline:auto;
      width:136.0rem;
    }
    @media (width <= 640px) {
      width:100%;
      font-size:1.1rem;
    }
  }

  .item {
    flex-shrink: 0;
    display:flex;
    align-items: center;
    vertical-align: middle;

    a {
    }

    &:first-child {
      a {
        display:flex;
        align-items: center;
        gap:.3em;
        padding-bottom:.05em;
      }
    }
    &:not(:first-child) {
      &::before {
        flex-shrink: 0;
        content:"";
        margin-inline:0.8rem;
        border-bottom:1px solid var(--base-color);
        width:1.0rem;
        height:0;
        @media (width <= 640px) {
          border-bottom-color:#fff;
        }
      }
      > :is(a,span) {
        position:relative;
        top:-.125em;
      }
    }
    &:last-child {
      padding-inline-end:var(--topicpath-pd);
      color:#909090;
      @media (width <= 640px) {
        color:#fff;
      }
    }
    &:not(:last-child) {
      > :is(a) {
        text-underline-offset: 0;
      }
    }
  }

  body:has(.l-lowerpage-header-A) & {
    @media (width <= 640px) {
      background-color:rgb(from var(--cc-black-A) r g b / .25);
      color:var(--cc-white-A);
      background-color:rgb(from #1C1414 r g b / .25);
      color:#fff;
      border-top:none;
      a {
        color:var(--cc-white-A);
      }
      .item {
        &:not(:first-child) {
          &::before {
            border-bottom-color:var(--cc-white-A);
          }
        }
        &:last-child {
          color:var(--cc-white-A);
        }
      }
    }
  }
  body:not(:has(.l-lowerpage-header-A)) & {
    @media (width <= 640px) {
      background-color:#fff;
      border-block:1px solid var(--cc-gray_line-A);
      .item {
        &:not(:last-child) {
          &::before {
            border-bottom-color:var(--cc-black-A);
          }
        }
      }
    }
  }
}


/* TSUBAKIでの過ごし方導線
============================================================================= */
.g-stayscene {
  @media (width > 640px) {
    display:grid;
    grid-template-rows:14.9rem 14.9rem 30.0rem 30.0rem;
    grid-template-columns:1fr repeat(2,39.2rem) 1fr;
    padding:var(--body-pd);
    gap:2px;
    position:relative;
  }
  @media (width <= 640px) {
    display:flex;
    flex-direction: column;
    padding:0 var(--body-pd) 10.4rem;
  }
  .text {
    @media (width > 640px) {
      grid-row:2/4;
      grid-column:3/4;
      padding-inline:7.2rem;
      padding-top:6.0rem;
      z-index: 1;
    }
    @media (width <= 640px) {
      display:contents;
    }
  }
  .text-subheading {
    font-size:1.4rem;
    letter-spacing: .05em;
    line-height:1;
    @media (width > 640px) {
      color:#fff;
      writing-mode: vertical-rl;
      position:absolute;
      top:calc(2.4rem + var(--body-pd));
      right:calc(2.4rem + var(--body-pd));
    }
    @media (width <= 640px) {
      margin-bottom:.8rem;
      font-size:1.2rem;
      color:var(--cc-gray_text-A);
    }
  }
  .text-heading {
    margin-bottom:3.2rem;
    @media (width <= 640px) {
      margin-bottom:2.4rem;
      font-size:2.2rem;
    }
  }
  .text-desc {
    @media (width <= 640px) {
      padding-inline:4.5rem;
    }
  }
  .text > .l-button-A {
    margin-top:3.6rem;
    @media (width <= 640px) {
      order:10;
    }
  }
  .imgs {
    @media (width > 640px) {
      grid-row:1/-1;
      grid-column:1/-1;
      display:grid;
      grid-template-rows:subgrid;
      grid-template-columns:subgrid;
    }
    @media (width <= 640px) {
      display:grid;
      /* grid-template-rows:15.2rem 13.5rem 13.5rem 15.2rem 18.5rem; */
      grid-template-rows:15.2rem 13.5rem 13.5rem;
      grid-template-columns:1fr 1fr;
      gap:2px;
      margin-top:4.8rem;
    }
    .img {
      overflow: hidden;
      &:nth-child(1) {
        @media (width > 640px) {
          grid-row:1/3;
          grid-column:1/3;
        }
        @media (width <= 640px) {
          grid-row:1/2;
          grid-column:1/3;
        }
      }
      &:nth-child(2) {
        @media (width > 640px) {
          grid-row:3/5;
          grid-column:1/2;
        }
        @media (width <= 640px) {
          grid-row:2/4;
          grid-column:1/2;
        }
      }
      &:nth-child(3) {
        @media (width > 640px) {
          grid-row:3/4;
          grid-column:2/3;
        }
        @media (width <= 640px) {
          grid-row:2/3;
          grid-column:2/3;
        }
      }
      &:nth-child(4) {
        @media (width > 640px) {
          grid-row:4/5;
          grid-column:2/3;
        }
        @media (width <= 640px) {
          grid-row:3/4;
          grid-column:2/3;
          display:none !important;
        }
      }
      &:nth-child(5) {
        @media (width > 640px) {
          grid-row:4/5;
          grid-column:3/5;
        }
        @media (width <= 640px) {
          grid-row:4/5;
          grid-column:1/3;
          display:none !important;
        }
      }
      &:nth-child(6) {
        @media (width > 640px) {
          grid-row:1/2;
          grid-column:3/4;
        }
        @media (width <= 640px) {
          /* grid-row:5/6; */
          /* grid-column:1/2; */
          grid-row:3/4;
          grid-column:2/3;
        }
      }
      &:nth-child(7) {
        @media (width > 640px) {
          grid-row:1/4;
          grid-column:4/5;
        }
        @media (width <= 640px) {
          grid-row:5/6;
          grid-column:2/3;
          display:none !important;
        }
      }
    }
  }
}


/* フッターお問い合わせ
============================================================================= */
.g-contact {
  display:grid;
  align-content: center;
  justify-content: center;
  position:relative;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    justify-content: stretch;
  }

  .contact-heading {
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:1.2rem;
    margin-bottom:6.8rem;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-bottom:4.8rem;
    }

    .p-ff-serif {
      font-size:1.6rem;
      line-height:1;
      letter-spacing: .16em;
    }
  }
  .contact-list {
    display:grid;
    @media (width > 640px) {
      grid-template-columns: repeat(4,1fr);
      gap:4.8rem;
    }
    @media (width <= 640px) {
      gap:2.4rem;
    }

    .l-button-B {
      width:100%;
    }
  }
}


/* Pagetop
============================================================================= */
.g-pagetop_button {
  display:flex;
  justify-content: center;
  align-items: center;
  width:5.0rem;
  height:auto;
  aspect-ratio: 1/1;
  background-color:var(--cc-black-A);
  z-index:500;
  position:fixed;
  bottom:0;
  right:0;
  transform:translateY(100%);
  transition-property: transform,opacity;
  transition-duration: var(--duration-hover-A);
  transition-timing-function: var(--ttf-eo-cubic);
  @media (width <= 640px) {
    bottom: 1px;
    transform:translateY(calc(100% + var(--sp-fixed-height)));
    z-index: 1500;
  }
  &::after {
    background-color:#fff;
    width:1.6rem;
  }
}
body.is-scrolled .g-pagetop_button {
  transform:translateY(0);
}


/* フッター
============================================================================= */
.g-footer {

  @media (width > 640px) {
    padding-block:8.0rem;
  }
  @media (width <= 640px) {
    padding-top:8.0rem;
  }

  > .inner {
    display:grid;
    justify-items: center;
  }
  .logo {
    margin-bottom:4.0rem;
  }
  .name {
    margin-bottom:3.2rem;
    font-size:2.6rem;
    line-height:1;
    letter-spacing: .16em;
    @media (width <= 640px) {
      margin-bottom:1.6rem;
      font-size:1.8rem;
    }
  }
  .address {
    margin-bottom:6.4rem;
    font-size:1.5rem;
    line-height:1;
    letter-spacing: .16em;
    @media (width <= 640px) {
      margin-bottom:3.2rem;
      font-size:1.2rem;
      letter-spacing: .12em;
    }
  }
  .links {
    margin-bottom:4.8rem;
    width:100%;
    font-size:1.5rem;
    line-height:1;
    letter-spacing: .16em;
    @media (width > 640px) {
      display:flex;
    }
    @media (width <= 640px) {
      display:grid;
      justify-items: center;
      gap:.4rem;
      margin-bottom:3.2rem;
      font-size:1.3rem;
      line-height:2.4;
    }

    > li {
      @media (width > 640px) {
        display:flex;
        padding-bottom:.1em;
        &:is(:first-child) {
          flex-shrink:1;
        }
        &:not(:first-child) {
          flex-grow:1;
          &::before {
            flex:.5;
            content:"";
            margin-top:.1em;
            margin-left:auto;
            border-left:1px solid;
          }
        }
      }

      > a {
        display:flex;
        gap:.4rem;
        @media (width <= 640px) {
          text-decoration: underline;
        }
        &::after {
          flex-shrink: 0;
          position:relative;
          bottom:-.1em;
        }
      }
    }
  }
  .kenhotels-link {
    font-size:1.5rem;
    line-height:1;
    letter-spacing: .16em;
    @media (width <= 640px) {
      font-size:1.4rem;
      line-height:1.2;
    }
     > a {
        display:flex;
        gap:.4rem;
        text-decoration: underline;
        &::after {
          flex-shrink: 0;
          position:relative;
          bottom:-.1em;
        }

     }
  }
  .copyright {
    margin-top:8.0rem;
    font-size:1.3rem;
    line-height:1;
    letter-spacing: .16em;
    text-align: center;
    @media (width <= 640px) {
      margin-top:5.6rem;
      padding-bottom:8.0rem;
      font-size:1.0rem;
      line-height:1.8;
      letter-spacing: 0;
    }
  }
}


/* 予約関連
============================================================================= */
.g-reserve-A {
  display:grid;
  @media (width > 640px) {
    align-items: flex-start;
    padding:8.0rem;
    grid-template-columns:auto 52.8rem;
    justify-content: space-between;
  }
  @media (width <= 640px) {
    padding:5.6rem 3.6rem;
  }

  &.-stay {
    .contents-links {
      .l-button-C {
        min-height:5.0rem;
        height:5.0rem;
      }
    }
  }

  .l-heading-C {
    @media (width > 640px) {
      margin-bottom:0;
    }
    @media (width <= 640px) {
      margin-bottom:4.0rem;
    }
  }

  .contents {
    display:grid;
    gap:2.4rem;
    @media (width <= 640px) {
      gap:3.2rem;
    }
  }
  .contents-links {
    display:grid;
    gap:1.6rem;
    @media (width > 640px) {
      grid-template-columns: 1fr 1fr;
    }
    @media (width > 640px) {
      .l-button-C {
        min-height:4.8rem;
        &:not(:nth-child(1):last-child):nth-child(odd):last-child {
          grid-column:1/-1;
        }
      }
    }
  }
  .contents-tel {
    display:flex;
    line-height:1;
    white-space: nowrap;
    @media (width > 640px) {
      align-items: baseline;
      gap:1.6rem;
    }
    @media (width <= 640px) {
      flex-direction: column;
      align-items: center;
      gap:.8rem;
    }

    .tel-link {
      display:flex;
      align-items: baseline;
      > small {
        font-size:2.2rem;
        letter-spacing: .05em;
        @media (width <= 640px) {
          font-size:1.8rem;
        }
      }
      > span {
        font-size:3.2rem;
        letter-spacing: .05em;
        @media (width <= 640px) {
          font-size:2.8rem;
        }
      }
    }
  }
  .contents-others {
    display:flex;
    font-size:1.3rem;
    letter-spacing: .15em;
    line-height:1;
    gap:2.4rem;
    @media (width <= 640px) {
      flex-direction: column;
    }
    .others-item {
    }
    .item-link {
      display:flex;
      align-items: center;
      gap:.8rem;
      padding-bottom:.2rem;
      border-bottom:1px solid;
      width:fit-content;
    }
  }
}


/* フロアマップ
============================================================================= */
.g-floor_maps {
  display:grid;
  @media (width > 640px) {
    grid-template-columns: repeat(3,1fr);
    gap:4.4rem;
  }
  @media (width <= 640px) {
    gap:3.2rem;
  }

  .item {
    .heading {
      margin-bottom:1.6rem;
      font-size:2.4rem;
      line-height:1;
      letter-spacing: .05em;
      text-align: center;
      @media (width <= 640px) {
        font-size:1.8rem;
      }
    }
    .img {
      display:flex;
      justify-content: center;
      align-items: center;
      width:100%;
      height:auto;
      aspect-ratio: 424/264;
      position:relative;

      &::after {
        position:absolute;
        right:1.6rem;
        bottom:1.6rem;
      }
    }
  }
}
.g-floor_map-modal {
  .modal_inner {
    display:flex;
    align-items: center;
    height:100dvh;
    @media (width <= 640px) {
      width:100%;
      padding-inline:1.5rem;
    }
  }
  .modal_contents {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
    @media (width > 640px) {
      width:90.0rem;
      height:60.0rem;
      margin-inline:auto;
    }
    @media (width <= 640px) {
      padding-block:6.0rem 11.0rem;
      padding-inline:2.0rem;
      width:100%;
    }
    .heading {
      margin-bottom:3.2rem;
      font-size:2.4rem;
      line-height:1;
      letter-spacing: .05em;
      @media (width > 640px) {
        margin-top:-4.0rem;
      }
      @media (width <= 640px) {
        margin-bottom:2.4rem;
        font-size:1.8rem;
        line-height:1;
        letter-spacing: .05em;
      }
    }
    .img {
      @media (width <= 640px) {
        width:100%;
      }
    }
    .js-modal-close {
      margin:0;
      padding:2.8rem 3.2rem;
      height:fit-content;
      position:absolute;
      right:0;
      top:auto;
      bottom:0;
      @media (width <= 640px) {
        margin-inline:auto;
        width:fit-content;
        inset-inline:0;
        bottom:.4rem;
      }
    }
  }
}




/* アクセス
============================================================================= */
.g-access-A {
  @media (width > 640px) {
    display:grid;
    grid-template-columns:1fr 68.8rem;
    justify-content: space-between;
    align-items: center;
  }
  @media (width <= 640px) {
  }
  .text {
    .l-heading-C {
      margin-bottom:7.2rem;
      @media (width <= 640px) {
        margin-bottom:4.0rem;
      }
    }
    .address {
      margin-block:2.4rem;
    }
    .desc {
      @media (width > 640px) {
        width:36.0rem;
      }
    }
  }
  .map {
    height:46.0rem;
    @media (width <= 640px) {
      margin-top:6.4rem;
      height:22.0rem;
    }
    iframe {
      width:100%;
      height:100%;
    }
  }
}


/* オプティマフォーム
============================================================================= */
.g-reserve_form {
  @media (width > 640px) {
    padding-block:3.6rem;
    &:not(:has(.bestrate)) {
      > .inner {
        padding-inline:3.0rem;
      }
    }
  }
  @media (width <= 640px) {
    padding-block:6.4rem;
  }
  > .inner {
    @media (width > 640px) {
      display:flex;
      align-items: center;
    }
  }

  .heading {
    display:grid;
    justify-content: center;
    gap:1.0rem;
    line-height:1;
    text-align: center;
    @media (width > 640px) {
      margin-right:auto;
    }
    @media (width <= 640px) {
      margin-bottom:3.2rem;
    }
    .en {
      font-size:1.8rem;
      letter-spacing: .05em;
      @media (width <= 640px) {
      }
    }
    .ja {
      font-size:1.6rem;
      letter-spacing: .15em;
      @media (width <= 640px) {
      }
    }
  }
  .bestrate {
    @media (width > 640px) {
      margin-right:4.8rem;
    }
    @media (width <= 640px) {
      display:flex;
      justify-content: center;
      margin-bottom:3.2rem;
    }
  }
  .search {

  }
  .search-form {
    --h:4.6rem;
    @media (width > 640px) {
      display:flex;
      gap:2.0rem;
      align-items: center;
    }
    @media (width <= 640px) {
      --h:5.6rem;
      display:grid;
      grid-template-columns:1fr .45fr .45fr 1fr;
      gap:2.0rem 1.2rem;
    }

    .select_wrap {
      display:flex;
      align-items: center;
      gap:.8rem;
      height:var(--h);
      font-size:1.4rem;
      letter-spacing: .05em;
      @media (width > 640px) {
        &:has(select[name="dt_dd"]) {
          margin-right:2.0rem;
        }
      }
      @media (width <= 640px) {
        width:100%;
        &:has(select:is([name="dt_yyyymm"],[name="dt_dd"],[name="mc"])) {
          grid-column:span 2;
        }
        &:has(select:is([name="le"],[name="rc"])) {
          grid-column:span 1;
        }
      }

      > .select {
        background-color:#fff;
        border:1px solid var(--cc-black-A);
        position:relative;
        height:100%;
        @media (width <= 640px) {
          width:100%;
        }

        &::after {
          margin-block:auto;
          right:1.6rem;
          pointer-events:none;
          position:absolute;
          inset-block:0;
          @media (width <= 640px) {
            right:1.2rem;
          }
        }

        > select {
          display:flex;
          align-items: center;
          padding-inline:2.0rem 4.2rem;
          height:100%;
          cursor:pointer;
          @media (width <= 640px) {
            width:100%;
            padding-inline:2.0rem 3.2rem;
          }

          > option {
            &[disabled] {
              display:none;
            }
          }
        }
      }
    }
    .l-button-B {
      padding-block:0;
      min-height:var(--h);
      font-family:var(--ff-default);
      font-size:1.4rem;
      letter-spacing: .05em;
      @media (width > 640px) {
        margin-left:2.0rem;
        min-width:16.2rem;
      }
      @media (width <= 640px) {
        grid-column:1/-1;
        margin-top:.8rem;
        min-width:100%;
      }
    }
  }
  .links {
    font-size:1.3rem;
    line-height:1.5;
    letter-spacing: .05em;
    @media (width > 640px) {
      display:flex;
      gap:3.2rem;
      margin-top:1.6rem;
    }
    @media (width <= 640px) {
      margin-top:2.4rem;
    }
    .links-main {
      display:flex;
      gap:2.6rem;
      @media (width <= 640px) {
        justify-content: center;
        gap:1.8rem;
      }
      a {
        text-decoration: underline;
        @media (hover:hover) {
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
    .checkin_out {
      @media (width <= 640px) {
        margin-top:1.6rem;
        text-align: center;
      }
    }
  }
}

/* 動画スライドエリア
============================================================================= */
@media (width > 640px) {
  .newvideoslidearea {
    height: 500vh;
    margin-bottom: 16rem;

    .stickybox {
      position: sticky;
      top: var(--header-height);
      left: 0;
      width: 100%;
      height: calc(100vh - var(--header-height));
    }
    .slider {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }
    .slider-box {
      position: absolute;
      top: 0;
      left: -450vw;
      width: 1000vw;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0 32px;
    }
    .slider-img {
      display: block;
      width: 40rem;
      height: 22.5rem;
      object-fit: cover;
      display: block;
      flex: 0 0 auto;

      &:nth-child(1) { order: 3; }
      &:nth-child(2) { order: 4; }
      &:nth-child(3) { order: 5; }
      &:nth-child(4) { order: 1; }
      &:nth-child(5) { order: 2; }
    }

    .focus-layer {
      position: absolute;
      pointer-events: none;
      top: 4rem;
      left: 4rem;
      width: calc(100vw - 8rem);
      height: calc(100% - 8rem);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    .focus-in {
      position: relative;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
    }
    .focus-video {
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .focus-thumb {
      display: block;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .mobile-play {
      display: none;
    }
    .scrollannounce {
      position: absolute;
      bottom: 4rem;
      right: 0;
      left: 0;
      width: 5rem;
      height: 5rem;
      margin: auto;
      z-index: 2;
      mix-blend-mode: difference;
      cursor: pointer;
      &:before {
        content: "SCROLL";
        display: block;
        font-size: 0.9rem;
        line-height: 1;
        letter-spacing: .16em;
        color: #FFF;
        margin-bottom: .8rem;
        text-align: center;
        position: absolute;
        width: 10rem;
        left: 50%;
        letter-spacing: 3px;
        top: 0;
        transform: translateX(-50%);
      }
      &:after {
        content: "";
        display: block;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 1px;
        height: 3rem;
        margin: auto;
        /* スクロールを促すループアニメーション */
        animation: scrollPrompt 2s linear infinite;
      }
      @media(hover:hover) {
        &:before {
          transition: top 0.2s;
        }
        &:hover {
          &:before {
            top: 0.5rem;
          }
        }
      }
    }
  }
}

@keyframes scrollPrompt {
  0% {
    clip-path: inset(0% 0% 100% 0%);
  }
  25% {
    clip-path: inset(0% 0% 0% 0%);
  }
  50% {
    clip-path: inset(0% 0% 0% 0%);
  }
  75% {
    clip-path: inset(100% 0% 0% 0%);
  }
  99.9% {
    clip-path: inset(100% 0% 0% 0%);
  }
  100% {
    clip-path: inset(0% 0% 100% 0%);
  }
}

@media (width <= 640px) {
  .newvideoslidearea {
    margin-bottom: 6.4rem;

    .stickybox {
      position: relative;
      height: auto;
    }
    .slider {
      display: none;
    }
    .focus-layer {
      position: relative;
      opacity: 1;
      pointer-events: auto;
    }
    .focus-in {
      width: auto!important;
      height: auto!important;
    }
    .focus-video {
      width: 100%;
      height: 100vw;
      display: block;
      object-fit: cover;
    }
    .focus-thumb {
      display: none;
    }
    .mobile-play {
      display: none !important;
    }
    .scrollannounce {
      display: none;
    }
  }
}

@media (width > 640px) {
  .videoslidearea-wrap{
    height: 500vh;
    margin-bottom: 16rem;
		/* オフセット用のカスタムプロパティを追加 */
		--box-offset-x: 0px;
		--box-offset-y: 0px;
  }
  .videoslidearea{
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;

    /* JSが更新するカスタムプロパティ（PC用演出で使用） */
    --base-shift: 0px;
    --layer-opacity: 0;
    --box-w: 40rem;
    --box-h: 22.5rem;
    --img-opacity: 1;
    --video-opacity: 0;

    .marquee{
      width: 100vw;
      .marquee-frame{
        transform: translateX(var(--base-shift));
        will-change: transform;
        .marquee-scroll{
          display: flex;
          flex-wrap: nowrap;
          column-gap: 32px;
          will-change: transform;
          .marquee-track{
            display: flex;
            flex-shrink: 0;
            gap: 0 32px;
            .marquee-img{
              width: 40rem;
              height: 22.5rem;
              object-fit: cover;
              display: block;
              flex: 0 0 auto;
            }
          }
        }
      }
    }

    .focus-layer{
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: var(--layer-opacity);
      transition: opacity .18s ease-out;

      .focus-box{
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--box-w);
        height: var(--box-h);
        transform: translate(-50%, -50%);
        will-change: width, height;
        /* 元のtransformに加えてオフセットを適用 */
        transform: translate(calc(-50% + var(--box-offset-x)), calc(-50% + var(--box-offset-y)));

        .focus-video,
        .focus-img{
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .focus-video{ opacity: var(--video-opacity); z-index: 1; }
        .focus-img{ opacity: var(--img-opacity); z-index: 2; }

        /* SPの中央再生ボタン（PCでは非表示） */
        .mobile-play{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 72px;
          height: 72px;
          border-radius: 50%;
          border: none;
          background: rgba(0,0,0,.55);
          color: #fff;
          font-size: 28px;
          line-height: 1;
          display: none;
          pointer-events: auto; /* クリック可能に */
        }
      }
    }
  }
}
@media (width <= 640px) {
  .videoslidearea-wrap{
    margin-bottom: 6.4rem;
  }
  .marquee{ display: none; }
  .focus-layer{
    position: relative;
    opacity: 1; /* 常時表示 */
    pointer-events: auto;
    .focus-box{
    }
    .focus-video{
      opacity: 1; /* 常時可視 */
      width: 100%;
      height: 100vw;
      display: block;
      object-fit: cover;
    }
    .focus-img{ display: none; } /* 1の画像はSPでは非表示 */
    .mobile-play{ 
      display: none!important;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      &:before {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
      }
      &:after {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        left: 12px;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 10px solid #000;
      }
    }
  }
}


/* Sample
============================================================================= */
.g-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}



/* g-featurebox
----------------------------------------------------------------------------- */
.g-featurebox {
  @media (width > 640px) {
    display:grid;
    grid-template-columns:calc(50% + 60.0rem) 1fr;
    grid-auto-flow:column;
    align-items: flex-start;
    clip-path: inset(0px);
  }
  @media (width <= 640px) {
  }

  .l-heading-B {
    @media (width > 640px) {
      display:flex;
      flex-direction: column-reverse;
      margin-right:auto;
      grid-column:2/3;
      writing-mode: vertical-rl;
      position:sticky;
      top:calc(var(--header-height) + 4.0rem);
    }
    @media (width <= 640px) {
      margin-bottom:5.6rem;
    }
  }

  .feature-contents {
    --h:150dvh;

    position:relative;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      display:grid;
      gap:8.0rem;
    }
    .contents-item {
      @media (width > 640px) {
        height:var(--h);
        transition-property: opacity;
        transition-duration:.5s;

        &.is-active {
          .item-img {
            opacity: 1;
          }
        }
        &:first-child {
          .item-img {
            margin-top: 0;
            opacity: 1;
          }
        }
        &:nth-of-type(2) {
          .item-img {
            margin-top: calc(var(--h) * -1.0);
          }
        }
        &:nth-of-type(3) {
          .item-img {
            margin-top: calc(var(--h) * -2.0);
          }
        }
        &:nth-of-type(4) {
          .item-img {
            margin-top: calc(var(--h) * -3.0);
          }
        }
        &:nth-of-type(5) {
          .item-img {
            margin-top: calc(var(--h) * -4.0);
          }
        }
        &:nth-of-type(6) {
          .item-img {
            margin-top: calc(var(--h) * -5.0);
          }
        }
        &:nth-of-type(7) {
          .item-img {
            margin-top: calc(var(--h) * -6.0);
          }
        }
      }

      > .inner {
        @media (width > 640px) {
          display: flex;
          align-items: start;
          height:100%;
          gap: 0 10rem;
        }
      }
    }
    .item-img {
      @media (width > 640px) {
        width: 50vw;
        height:0;
        position: sticky;
        top: var(--header-height);
        overflow: visible;

        transition: opacity 0.3s;
        opacity: 0;
      }
      @media (width <= 640px) {
        margin-bottom:5.0rem;
        width:36.0rem;
        height:auto;
        aspect-ratio: 1/1;
      }
      img {
        width:100%;
        height:100%;
        @media (width > 640px) {
          height:100vh;
        }
      }
      &.-col_3 {
        display:grid;
        grid-template-columns: repeat(3,1fr);
        @media (width > 640px) {
          display: flex;
        }
        .col {
          @media (width > 640px) {
            width: 33.3333%;
            height: 100vh;
          }
        }
      }
    }
    .item-text {
      @media (width > 640px) {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .text-number {
      display:flex;
      align-items: center;
      margin-bottom:1.6rem;
      font-size:1.4rem;
      letter-spacing: .07em;
      line-height:1;
      position:relative;
      @media (width <= 640px) {
      }

      &::before {
        content:'';
        border-bottom:2px solid var(--cc-gold-A);
        width:1.6rem;
        position:absolute;
        right:calc(100% + 2.0rem);
        @media (width <= 640px) {
          width:2.0rem;
          right:calc(100% + 1.0rem);
        }
      }
    }
    .text-heading {
      margin-bottom:4.0rem;
      @media (width <= 640px) {
        margin-bottom:2.8rem;
      }
    }
    .text-desc {
      @media (width > 640px) {
        width:43.0rem;
      }
    }
    .text-sign {
      margin-top:6.8rem;
      @media (width <= 640px) {
        margin-top:5.6rem;
      }
    }
  }
}

/* 幅が縮むやつ
----------------------------------------------------------------------------- */
.art-stickybox {

}
@media (width > 640px) {
  .art-hero {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));

    transition: width 1.0s;
    width: 100%;
    &.is-passed ,
    &.is-size01 {
      width: 50%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
@media (width <= 640px) {
  .art-hero {
    margin-block-start: 10.4rem;
  }
}
@media (width > 640px) {
  .art-container-B {
    position: relative;
  }
}
@media (width <= 640px) {
  .art-container-B .art-container-B__artist-name {
    font-size: 1.8rem !important;
  }
}
@media (width > 640px) {
  .art-container-B > .p-w-pc-1200 {
    display: flex;
    align-items: center;
  }
  .art-container-B > .p-w-pc-1200::before {
    content: "";
    display: block;
    width: 80rem;
    height: 90rem;
  }
}
@media (width > 640px) {
  .art-container-B__inner {
    padding-top: 70vh;
    padding-bottom: 100vh;
  }
}
@media (width <= 640px) {
  .art-container-B__inner {
    padding-block-start: 4.8rem;
  }
}
@media (width > 640px) {
  .art-container-B__body {
    width: 43.7rem;
  }
}
@media (width <= 640px) {
  .art-container-B__body {
    width: 100%;
  }
}
.art-container-B__heading {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.art-container-B__artist-name {
  line-height: 1.8;
  letter-spacing: 0.16em;
}
@media (width > 640px) {
  .art-container-B__artist-name {
    font-size: 2.2rem;
  }
}
@media (width <= 640px) {
  .art-container-B__artist-name.p-tg-ja_heading-C {
    font-size: 1.8rem;
  }
}
.art-container-B__artist-period {
  font-family: var(--ff-default);
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: var(--cc-gray_text-A);
  font-size: 1.4rem;
}
.art-container-B__text {
  margin-top: 3.2rem;
}
.art-container-B__item {
  display: flex;
  align-items: baseline;
}
.art-container-B__item:not(:first-child) {
  margin-top: 0.4rem;
}
.art-container-B__label {
  position: relative;
  -webkit-padding-end: 1rem;
          padding-inline-end: 1rem;
  letter-spacing: 0.62em;
  line-height: 2.1;
  color: var(--cc-gray_text-A);
}
.art-container-B__label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  height: 1.6rem;
  background-color: var(--cc-gray_text-A);
}
@media (width > 640px) {
  .art-container-B__label {
    width: 8.8rem;
    text-align: justify;
    font-size: 1.6rem;
  }
}
@media (width <= 640px) {
  .art-container-B__label {
    width: 7.8rem;
    letter-spacing: 0.12em;
    text-align: left;
    font-size: 1.4rem;
  }
}
.art-container-B__label--spacing {
  letter-spacing: 0.12em;
}
.art-container-B__value {
  -webkit-margin-start: 1.6rem;
          margin-inline-start: 1.6rem;
  letter-spacing: 0.12em;
  line-height: 2.1;
}
@media (width > 640px) {
  .art-container-B__value {
    font-size: 1.6rem;
  }
}
@media (width <= 640px) {
  .art-container-B__value {
    font-size: 1.4rem;
  }
}
.art-container-B__outline-title {
  letter-spacing: 0.05em;
  line-height: 1;
}
@media (width > 640px) {
  .art-container-B__outline-title {
    margin-top: 6.4rem;
    font-size: 1.6rem;
  }
}
@media (width <= 640px) {
  .art-container-B__outline-title {
    margin-top: 4rem;
    font-size: 1.5rem;
  }
}
.art-container-B__outline-text {
  margin-top: 1.6rem;
  letter-spacing: 0.12em;
  line-height: 2.1;
}
@media (width > 640px) {
  .art-container-B__outline-text {
    font-size: 1.5rem;
  }
}
@media (width <= 640px) {
  .art-container-B__outline-text {
    font-size: 1.4rem;
  }
}