@charset "UTF-8";

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

Layout CSS

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

上記はここに記述する

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

/* Container
============================================================================= */
.l-form_container {
  padding-block:8.0rem 16.0rem;
  background-color:var(--cc-white-B);
  @media (width <= 640px) {
    padding-block:4.0rem 10.0rem;
  }
}


/* Heading
============================================================================= */
/* A */
[class*="l-heading"] {
  &.-no_mb {
    margin-bottom:0;
  }
  &.-left {
    align-items: flex-start;
    text-align: start;
  }
  @media (width > 640px) {
    &.-pc_no_mb {
      margin-bottom:0;
    }
    &.-pc_left {
      align-items: flex-start;
      text-align: start;
    }
  }
  @media (width <= 640px) {
    &.-sp_no_mb {
      margin-bottom:0;
    }
    &.-sp_left {
      align-items: flex-start;
      text-align: start;
    }
  }
}
.l-heading-A {
  display:flex;
  flex-direction:column;
  align-items: center;
  text-align: center;
  gap:1.2rem;
  margin-bottom:5.6rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .p-tg-en_heading-A {
  }
  .p-ff-serif {
    font-size:1.6rem;
    line-height:1;
    letter-spacing: .16em;
  }
}

/* B */
.l-heading-B {
  display:flex;
  flex-direction:column;
  align-items: center;
  text-align: center;
  gap:1.2rem;
  margin-bottom:5.6rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .p-tg-en_heading-B {
  }
  .p-ff-serif {
    font-size:1.4rem;
    line-height:1;
    letter-spacing: .12em;
  }
}

/* C */
.l-heading-C {
  display:flex;
  flex-direction:column;
  align-items: center;
  text-align: center;
  gap:2.0rem;
  margin-bottom:5.6rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .p-tg-en_heading-C {
  }
  .p-ff-serif {
    font-size:1.4rem;
    line-height:1;
    letter-spacing: .12em;
  }
}

/* Section Header
============================================================================= */
.l-section_header-A {
}


/* Button 全体
----------------------------------------------------------------------------- */
.l-wrap_button-A {
  display:block;
  @media (hover:hover) {
    &:hover {
      .l-button-A {
        --my-color:var(--base-color-reverse);
        --my-bg:var(--base-bg-reverse);
      }
    }
  }
}

/* Button
----------------------------------------------------------------------------- */

[class*="l-button"] {
  &.-right {
    margin-right:0;
  }
  &.-left {
    margin-left:0;
  }
  @media (width > 640px) {
    &.-pc_right {
      margin-right:0;
    }
    &.-pc_left {
      margin-left:0;
    }
  }
  @media (width <= 640px) {
    &.-sp_right {
      margin-right:0;
    }
    &.-sp_left {
      margin-left:0;
    }
  }
}

.l-button-A {
	--my-color:var(--base-color);
	--my-bg:transparent;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap:3.2rem;
  margin-inline:auto;
  width:fit-content;
  min-height:5.4rem;
  font-size:1.4rem;
  line-height:1;
  letter-spacing: .15em;
	color:var(--my-color);
  position:relative;
	transition-property:background-color,color,border-color;
	transition-duration: var(--duration-hover-A);
  z-index: 1;

  @media (width > 640px) { /* PC */
  }
  @media (width <= 640px) { /* SP */
    font-size:1.3rem;
  }

  @media (hover:hover) {
    &:hover {
      &::before {
      }
      &.-minA::before {
      }
      &::after {
        animation:button-A-arrow .75s var(--ttf-eio-cubic);
        will-change: clip-path,transform;
      }
      > span {
        animation:button-A-span .75s var(--ttf-eio-cubic);
        will-change: clip-path,transform;
      }
    }
    :is(.splide__slide,.column-item,.item):has(.m-hover-i_scale:hover) &::after {
      animation:button-A-arrow .75s var(--ttf-eio-cubic);
      will-change: clip-path,transform;
    }
    :is(.splide__slide,.column-item,.item):has(.m-hover-i_scale:hover) & > span {
      animation:button-A-span .75s var(--ttf-eio-cubic);
      will-change: clip-path,transform;
    }
  }

  &::before {
    content:"";
    margin:auto;
    background-color:var(--my-bg);
    border-bottom:1px solid var(--my-color);
    position:absolute;
    inset:0;
    z-index:-1;
    transition-property:background-color,inset,border-color;
    transition-duration: var(--duration-hover-A);
  }
  &::after {
    background-color:var(--my-color);
    transition-property:background-color;
    transition-duration: var(--duration-hover-A);
  }

  &.-minA { /* 小さい場合 */
    gap:1.2rem;
    min-height:2.8rem;
    font-size:1.3rem;
  }
  &[style*="--minw"] {
    min-width:var(--minw);
  }

  > span {
    position:relative;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);

    &::after {
      content:attr(data-text);
      position:absolute;
      top:200%;
      left:0;
      width:100%;
      height:100%;
    }
  }

}

@keyframes button-A-arrow {
  0% {
    transform:translateX(0);
  }
  50% {
    transform:translateX(100%);
  }
  51% {
    transform:translateX(-100%);
    clip-path:polygon(calc(100% + 1px) 0, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px));
  }
  60% {
    transform:translateX(-100%);
    clip-path:polygon(calc(100% + 1px) 0, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px));
  }
  100% {
    transform:translateX(0);
    clip-path:polygon(0 0, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));
  }
}
@keyframes button-A-span {
  0% {
    transform:translateY(0);
    clip-path:polygon(0 0, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));
    opacity:1;
  }
  50% {
    transform:translateY(-100%);
    clip-path:polygon(0 calc(100% + 1px), calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) 200%, 0 200%);
    opacity:0;
  }
  100% {
    transform:translateY(-200%);
    clip-path:polygon(0 200%, calc(100% + 1px) 200%, calc(100% + 1px) 300%, 0 300%);
    opacity:1;
  }
}

.l-button-B {
	--my-color:var(--base-color);
	--my-bg:transparent;
  display:flex;
  justify-content: center;
  align-items: center;
  gap:3.2rem;
  margin-inline:auto;
  border:1px solid var(--my-color);
  padding-bottom:.1em;
  width:fit-content;
  min-height:8.0rem;
  font-family:var(--ff-serif);
  font-size:1.8rem;
  line-height:1;
  letter-spacing: .16em;
	color:var(--my-color);
  background-color:var(--my-bg);
  position:relative;
	transition-property:background-color,color,border-color;
	transition-duration: var(--duration-hover-A);
  z-index: 1;

  @media (width > 640px) { /* PC */
    min-width:30.0rem;
  }
  @media (width <= 640px) { /* SP */
    font-size:1.4rem;
    width:100%;
    min-height:6.4rem;
  }

  @media (hover:hover) {
    &:not(.-reverse):hover {
      --my-color:var(--base-color-reverse);
      --my-bg:var(--base-bg-reverse);
      border-color:var(--my-bg);
      background-color:var(--my-bg);
    }
    &.-reverse:hover {
      --my-color:var(--base-color);
      --my-bg:transparent;
    }
  }

  &::after {
    background-color:var(--my-color);
    transition-property:background-color;
    transition-duration: var(--duration-hover-A);
    position:absolute;
    right:2.0rem;
  }

  &.-reverse {
    --my-bg:var(--cc-black-A);
    --my-color:var(--cc-white-A);
    border-color:var(--cc-black-A);
  }
}

.l-button-C {
  --base-bg:var(--cc-red-A);
  --base-color:var(--cc-white-A);
  --base-bg-reverse:var(--cc-white-A);
  --base-color-reverse:var(--cc-red-A);
	--my-color:var(--base-color);
	--my-bg:var(--base-bg);
  display:flex;
  justify-content: center;
  align-items: center;
  gap:1.0rem;
  margin-inline:auto;
  border:1px solid var(--cc-red-A);
  width:100%;
  min-height:5.6rem;
  font-size:1.4rem;
  line-height:1;
  letter-spacing: .14em;
	color:var(--my-color);
  background-color:var(--my-bg);
  position:relative;
	transition-property:background-color,color,border-color;
	transition-duration: var(--duration-hover-A);
  z-index: 1;

  @media (width > 640px) { /* PC */
  }
  @media (width <= 640px) { /* SP */
    min-height:4.8rem;
  }

  @media (hover:hover) {
    &:hover {
      --my-color:var(--base-color-reverse);
      --my-bg:var(--base-bg-reverse);
      background-color:var(--my-bg);
    }
  }

  &::after {
    background-color:var(--my-color);
    transition-property:background-color;
    transition-duration: var(--duration-hover-A);
    gap:1.2rem;
  }

  &.-gray {
    border-color:var(--cc-gray_text-A);
  }

  &.-reverse {
    --base-bg:transparent;
    --base-color:var(--cc-red-A);
    --base-bg-reverse:var(--cc-red-A);
    --base-color-reverse:var(--cc-white-A);

    &.-gray {
      --base-color:var(--cc-gray_text-A);
      --base-bg-reverse:var(--cc-gray_text-A);
    }
  }
}


/* News List
----------------------------------------------------------------------------- */
.l-news-list-A-item {
  border-bottom:1px solid var(--cc-gray-A);
}
.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 .title {
  font-size:1.5rem;
  line-height:calc(26/14);
  letter-spacing: .075em;
}
.l-news-list-A-item .date_category {
  display:flex;
  align-items: center;
  gap:1.8rem;
  font-size:1.4rem;
  line-height:1.25;
  letter-spacing: .075em;
}
.l-news-list-A-item .date {
  border-right:1px solid var(--cc-gray-A);
  width:10.0rem;
}
.l-news-list-A-item-link :is(.date_category,.title) {
  transition-property: opacity;
  transition-duration: var(--duration-hover-A);
}
.l-news-list-A-item-link:not([href]) .m-i-bf-arrow-A {
  display:none;
}
@media (hover:hover) {
  .l-news-list-A-item-link[href]:hover :is(.date_category,.title) {
    opacity:.6;
  }
}
@media (width > 640px) {
  .l-news-list-A {
    grid-column:2/3;
    grid-row:1/3;
  }
  .l-news-list-A-item {
    padding-left:1.0rem;
  }
  .l-news-list-A-item-link {
    grid-template-columns:22.0rem 1fr auto;
    grid-auto-flow: column;
    align-items: center;
    align-content: center;
    padding-block:3.2rem;
  }
  .l-news-list-A-item .title {
  }
  .l-news-list-A-item-link .m-i-bf-arrow-A {
  }
}
@media (width <= 640px) {
  .l-news-list-A {
    margin-top:-2.4rem;
  }
  .l-news-list-A-item-link {
    gap:1.8rem;
    padding-block:2.4rem;
  }
  .l-news-list-A-item .date_category {
    font-size:1.2rem;
  }
  .l-news-list-A-item .date {
    width:8.8rem;
  }
  .l-news-list-A-item .title {
    font-size:1.4rem;
    text-decoration: underline;
  }
  .l-news-list-A-item .m-i-bf-arrow-A {
    display:none;
  }
}


/* Lower Page Header
----------------------------------------------------------------------------- */
/* A */
.l-lowerpage-header-A {
  display:flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom:6.0rem;
  height:100svh;
  position:relative;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    justify-content: center;
    align-items: center;
    padding-bottom:3.2rem;
    height:calc(100svh - var(--header-height) - var(--topicpath-height) - 8.2rem);
    text-align: center;
  }

  &::before,
  &::after {
    content:"";
    position:absolute;
    inset-inline:0;
  }
  &::before {
    height:20.0rem;
    background-image:linear-gradient(
      0deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.15) 15%,
      rgba(0,0,0,0.35) 35%,
      rgba(0,0,0,0.55) 55%,
      rgba(0,0,0,0.75) 75%,
      rgba(0,0,0,1) 100%
    );
    top:0;
    opacity:.3;
  }
  &::after {
    height:33.4rem;
    background-image:linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.15) 15%,
      rgba(0,0,0,0.35) 35%,
      rgba(0,0,0,0.55) 55%,
      rgba(0,0,0,0.75) 75%,
      rgba(0,0,0,1) 100%
    );
    bottom:0;
    opacity:.25;
  }

  .header-text {
    position:relative;
    z-index: 1;

    @media (width > 640px) {
      border-bottom:1px solid rgb(from var(--cc-white-A) r g b / .5);
      padding-bottom:4.0rem;
      width:calc(50% + 70.0rem);
      &::after {
        content:"";
        border-bottom:1px solid var(--cc-red-A);
        width:6.0rem;
        position:absolute;
        left:0;
        bottom:-1px;
      }
    }
    @media (width <= 640px) {
      width:calc(100% - var(--pi-sp-30));
    }


    .text-hotel_name {
      margin-bottom:2.0rem;
      font-size:1.2rem;
      line-height:1;
      letter-spacing: .10em;
      @media (width <= 640px) {
        margin-bottom:1.2rem;
        font-size:1.0rem;
      }
    }
    .text-heading {
      display:grid;
      gap:1.0rem;
      @media (width <= 640px) {
        gap:.2rem;
      }
      .en {
        font-size:6.0rem;
        line-height:1.2;
        letter-spacing: .05em;
        @media (width <= 640px) {
          font-size:3.4rem;
        }
      }
      .ja {
        font-size:1.6rem;
        line-height:1;
        letter-spacing: .16em;
        @media (width <= 640px) {
          font-size:1.4rem;
          line-height:1.8;
        }
      }
    }
  }
}


/* B */
.l-lowerpage-header-B {
  display:grid;
  justify-content: center;
  gap:1.2rem;
  padding-block:15.2rem 12.0rem;
  background-color:var(--cc-gray_back-A);
  text-align: center;
  line-height:1;
  @media (width <= 640px) {
    padding-block:7.2rem 5.6rem;
  }

  &.-border {
    border-bottom:1px solid var(--cc-gray_line-A);
  }

  .en {
    font-size:6.0rem;
    line-height:1.2;
    letter-spacing: .05em;
    @media (width <= 640px) {
      font-size:4.0rem;
    }
  }
  .ja {
    font-size:1.6rem;
    line-height:1;
    letter-spacing: .16em;
  }
}


/* contents
============================================================================= */
.l-side-menu_list-A {
  @media (width > 640px) {
    display:grid;
    gap:1.6rem;
    margin-block:calc(.5em - .5lh);
    margin-inline:auto;
    width:fit-content;
  }
  @media (width <= 640px) {
    display:flex;
    padding-block:calc((var(--header-height) - 4.5rem) / 2);
    height:var(--header-height);
    line-height:calc(16/13);
    letter-spacing: 0;
  }
  > li {
    @media (width > 640px) {
      margin-left:-5.0rem;
    }
    @media (width <= 640px) {
      flex:1;
      border-right:1px solid;
      &:first-child {
        border-left:1px solid;
      }
      position:relative;
    }
    > a {
      transition-duration:var(--duration-hover-A);
      transition-property: color;
      @media (hover:hover) {
        &:hover {
          color:var(--cc-green-B);
          opacity:1;
        }
      }
      @media (width > 640px) {
        display:flex;
        align-items: center;
        width:fit-content;
        gap:1.0rem;
        &::before {
          flex-shrink: 0;
          content:"";
          display:block;
          width:1.5rem;
          border-bottom:1px solid var(--cc-green-B);
          transition-duration:var(--duration-hover-A);
          transition-property: color;
          opacity:0;
        }
        &::after {
          content:none;
        }
      }
      @media (width <= 640px) {
        display:grid;
        grid-template-rows:2lh auto;
        align-items: space-between;
        justify-items: center;
        > p {
          margin-block:auto;
        }
        &::after {
          transition-duration:var(--duration-hover-A);
          transition-property: background-color;
          transform:rotate(90deg);
          margin-inline:auto;
          margin-bottom:-.4rem;
          position:absolute;
          bottom:.2rem;
          inset-inline:0;
        }
      }
      &.is-current {
        color:var(--cc-green-B);
        @media (width > 640px) {
          &::before {
            opacity:1;
          }
        }
        &::after {
          background-color:var(--cc-green-B);
        }
      }
    }
  }

}


/* Table
============================================================================= */
/* A */
.l-table-A {
  --tc:136;
  display:grid;
  grid-template-columns:var(--tc) 1fr;
  border-top:1px solid var(--cc-gray_line-A);
  color:var(--cc-gray_text-A);

  @media (width > 640px) {
    &[style*="--tc-pc"] {
      --tc:calc(var(--tc-pc) * .1rem);
    }
  }
  @media (width <= 640px) {
    font-size:1.2rem;
    &[style*="--tc-sp"] {
      --tc:calc(var(--tc-sp) * .1rem);
    }
    &:not([style*="--tc-sp"]) {
      font-size:1.3rem;
      grid-template-columns:1fr;

      > div {
        grid-template-rows:auto auto;
      }
      dt {
        padding-left:0;
      }
      dd {
        &:not(:has(.js-accordion-group)) {
          margin-top:.8rem;
        }
      }
    }
  }

  > div {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:subgrid;
    align-items: flex-start;
    grid-auto-flow:column;
    border-bottom:1px solid var(--cc-gray_line-A);
    padding-block:1.6rem;
    position:relative;

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

  :is(dt,dd) {
  }
  dt {
    padding-left:1.6rem;
  }
  dd {
    .js-accordion-group {
      @media (width > 640px) {
        display:grid;
        grid-template-columns:1fr auto;
        grid-auto-flow: column;
        align-items: flex-start;
        gap:4.0rem;
      }
    }
    .js-accordion-button {
      padding:.25lh;
      @media (width > 640px) {
        grid-column:2/3;
      }
      @media (width <= 640px) {
        position:absolute;
        top:1.8rem;
        right:0;
        z-index: 2;
      }
    }
    .js-accordion-target {
      @media (width > 640px) {
        grid-column:1/2;
      }
    }
    .js-accordion-target_inner {
      @media (width <= 640px) {
        padding-top:.8rem;
      }
    }
  }
}


/* Tab Buttons
============================================================================= */
.l-tab-buttons-A {
  display:grid;
  border-top:1px solid var(--cc-gray_line-A);
  @media (width > 640px) {
    display:flex;
  }
  @media (width <= 640px) {
    grid-template-columns:repeat(2,1fr);
  }

  .js-tab-button {
    display:flex;
    justify-content: center;
    align-items: center;
    border-right:1px solid var(--cc-gray_line-A);
    border-bottom:1px solid var(--cc-gray_line-A);
    min-height:5.6rem;
    text-align: center;
    line-height:1.4;
    color:var(--cc-gray_text-A);
    background-color:var(--cc-white-A);
    transition-property: color,border-color,background-color;
    transition-duration:var(--duration-hover-A);
    @media (hover:hover) {
      &:hover {
        color:var(--cc-red-A);
      }
    }
    @media (width > 640px) {
      flex:1;
      &:first-child {
        border-left:1px solid var(--cc-gray_line-A);
      }
    }
    @media (width <= 640px) {
      &:is(:nth-child(2n+2),:nth-child(odd):last-child) {
        border-right-width:0;
      }
      &:nth-child(odd):last-child {
        grid-column:1/-1;
      }
    }
    &[aria-expanded="true"] {
      @media (width > 640px) {
        color:var(--cc-red-A);
        border-bottom-color:var(--cc-red-A);
      }
      @media (width <= 640px) {
        color:#fff;
        background-color:var(--cc-red-A);
      }
    }
  }
}


/* 重要なお知らせ
============================================================================= */
.l-important_notice-A {
  display:flex;
  flex-direction: column;
  gap:2.4rem;
  justify-content: center;
  align-items: center;
  padding-block:4.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:2.4rem;
  }

  .contents {
    display:flex;
    align-items: center;
    font-size:1.4rem;
    line-height:1.2;
    letter-spacing: .17em;
    @media (width <= 640px) {
      display:grid;
      grid-template-columns:auto 1fr;
      grid-auto-flow: column;
      row-gap:1.2rem;
      font-size:1.2rem;
      letter-spacing: .10em;
    }
  }
  .contents-date {
    flex-shrink: 0;
    padding-right:2.4rem;
    position:relative;
    @media (width > 640px) {
      font-size:1.5rem;
    }

    &::after {
      content:"";
      border-right:1px solid;
      position:absolute;
      inset-block:.15em 0;
      right:0;
    }
  }
  .contents-category {
    flex-shrink: 0;
    margin-left:2.4rem;
  }
  .contents-title {
    display:flex;
    align-items: center;
    --my-color:var(--cc-red-B);
    letter-spacing: .15em;
    color:var(--my-color);
    @media (width > 640px) {
      margin-left:4.0rem;
      gap:2.8rem;
    }
    @media (width <= 640px) {
      grid-column:1/-1;
      grid-row:2/3;
    }

    &::after {
      flex-shrink: 0;
      background-color:var(--my-color);
      position:relative;
      top:.15em;
      @media (width <= 640px) {
        content:none;
      }
    }

    &[href] {
      > span {
        text-decoration: underline;
        text-underline-offset: 0;
      }
    }
  }
}


/* トピックスカルーセル
============================================================================= */
.l-topics-A {
  overflow:hidden;
  @media (width <= 640px) {
  }
  &:has(.is-sp_vs) {
    @media (width > 640px) {
      background-color:#fafafa;
    }
    @media (width <= 640px) {
      padding-bottom:0 !important;
    }
  }

  .contents {
    position:relative;
    @media (width > 640px) {
      padding-inline:4.8rem;
    }
    @media (width <= 640px) {
      &:not(.is-sp_vs) {
        display:flex;
        flex-direction: column;
        padding-inline:5.4rem;
        gap:3.2rem;
        width:100%;
        .splide__track {
          order:1;
          width:100%;
          overflow:visible;
        }
      }
      &:is(.is-sp_vs) {
        padding-inline:var(--pi-sp-30);
        .splide__list {
          display:grid;
          gap:3.2rem;
        }
        .contents-item {
          .item_link {
            display:grid;
            grid-template-rows:auto 1fr;
            grid-template-columns:16.0rem 1fr;
            grid-auto-flow:column;
            column-gap:1.6rem;
            align-items: flex-start;
          }
          .item-img {
            grid-row:1/-1;
            grid-column:1/2;
            aspect-ratio: 3/2;
            margin-bottom:0;
          }
          .item-date {
            margin-bottom:.8rem;
            padding-bottom:.2rem;
            font-size:1.3rem;
            line-height:1.8;
          }
          .item-title {
            line-height:1.7 !important;
          }
        }
        .splide__slide:not(:nth-child(-n+3),.is-sp_view) {
          display:none;
        }
        .js-topics-splide-more_button {
          display:flex;
          justify-content: center;
          align-items: center;
          gap:.8rem;
          margin-inline:auto;
          margin-top:4.0rem;
          border-top:1px solid;
          padding-bottom:.1em;
          width:100%;
          min-height:5.6rem;
          font-size:1.6rem;
          position:relative;
          &:not(.is-sp_hide) {
            > i::after {
              transform:rotate(-90deg);
            }
          }
          &:is(.is-sp_hide) {
            > i::before {
              transform:rotate(180deg);
            }
          }
          > i {
            display:flex;
            justify-content: center;
            align-items: center;
            width:1.4rem;
            height:1.4rem;
            position:relative;
            bottom:.05em;
            &::before,&::after {
              content:"";
              width:100%;
              height:2px;
              background-color:var(--cc-black-A);
              position:absolute;
              transition-property:transform;
              transition-duration: var(--duration-hover-A);
            }
          }
        }
      }
    }
  }
  .contents-item {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }

    .item-img {
      width:100%;
      height:auto;
      aspect-ratio: 16/9;
      margin-bottom:2.4rem;
    }
    .item-date {
      border-bottom:1px solid var(--cc-gray_line-A);
      margin-bottom:1.2rem;
      padding-bottom:.8rem;
      font-size:1.5rem;
      line-height:1.8;
      letter-spacing: .10em;
    }
    .item-title {
    }
  }

  .splide__arrows {
      @media (width <= 640px) {
        order:2;
        display:flex;
        align-items: center;
        gap:3.2rem;
        margin-inline:auto -2.8rem;
        width:fit-content;
        position:relative;

        &::after {
          content:"";
          margin:auto;
          position:absolute;
          width:1px;
          height:1.6rem;
          background-color:var(--cc-black-A);
          inset:0;
        }
      }
  }
  .js-splide-arrow-A {

    @media (width > 640px) {
      position:absolute;
      top:6.9rem;
    }
    @media (width <= 640px) {
    }

    &.is-prev {
      @media (width > 640px) {
        left:-.4rem;
      }
    }
    &.is-next {
      @media (width > 640px) {
        right:-.4rem;
      }
    }
  }
}


/* カラム
============================================================================= */
/* 共通 */
:where(.l-column2-A,.l-column3-A,.l-column4-A) {
  display:grid;
  @media (width <= 640px) {
    gap:5.6rem;
  }

  .column-item {
    display:flex;
    flex-direction: column;
    position:relative;
    @media (width <= 640px) {
      &:has(.p-vertical_text-A) {
        padding-left:2.2rem;
      }
    }

    .p-vertical_text-A {
      position:absolute;
      top:0;
      @media (width > 640px) {
        right:calc(100% + 1.0rem);
      }
      @media (width <= 640px) {
        left:0;
      }
    }
    .item-img {
      margin-bottom:2.4rem;
      @media (width <= 640px) {
      }
    }
    .item-number {
      margin-bottom:2.0rem;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .05em;
      @media (width > 640px) {
        order:-1;
        text-align: center;
      }
      @media (width <= 640px) {
        margin-bottom:1.6rem;
        font-size:1.6rem;
      }
    }
    .item-heading {
      margin-bottom:.8rem;
      @media (width <= 640px) {
        margin-bottom:1.6rem;
      }
    }
    .item-desc {
      @media (width > 640px) {
        &:has(+ .l-button-A,+ .item-links) {
          margin-bottom:2.4rem;
        }
      }
      @media (width <= 640px) {
        &.p-t-justify {
          word-break:break-all;
        }
      }
    }
    > :is(.l-button-A,.item-links) {
      @media (width > 640px) {
        margin-top:auto;
      }
      @media (width <= 640px) {
        margin-top:1.6rem;
      }
    }
    .item-links {
      display:flex;
      @media (width > 640px) {
        gap:4.0rem;
      }
      @media (width <= 640px) {
        flex-direction: column;
        gap:2.0rem;
      }
      .l-button-A {
        margin-left:0;
      }
    }
  }
}
/* 2カラム */
.l-column2-A {
  @media (width > 640px) {
    grid-template-columns:repeat(2,1fr);
    gap:8.0rem;
  }
}
/* 3カラム */
.l-column3-A {
  @media (width > 640px) {
    grid-template-columns:repeat(3,1fr);
    gap:8.0rem;
  }
}
/* 4カラム */
.l-column4-A {
  @media (width > 640px) {
    grid-template-columns:repeat(4,1fr);
    gap:5.6rem;
  }
}

/* カルーセルカラム
============================================================================= */
/* 共通 */
:where(.l-column3-carousel,.l-column4-carousel) {
  overflow:visible; /* 親要素に適切にoverflow:hidden;を設定すること */
  &:not(.is-active) {
    .splide__list {
      @media (width > 640px) {
        display:grid;
      }
    }
  }
  .splide__track {
    overflow:visible;
  }
  .splide__slide {
    display:flex;
    flex-direction: column;
    position:relative;
    @media (width <= 640px) {
      &:has(.p-vertical_text-A) {
        padding-left:2.2rem;
      }
    }
    :is(.img,.item-img) {
      margin-bottom:2.4rem;
      &.m-of-cover {
        height:auto;
        aspect-ratio: 3/2;
      }
    }
    .text {
      flex:1;
      display:flex;
      flex-direction: column;
      position:relative;
    }
    .text-heading {
      &:not(:last-child) {
        margin-bottom:.8rem;
      }
    }
    .text-desc {
      &:has(+ .l-button-A) {
        @media (width > 640px) {
          margin-bottom:1.6rem;
        }
        @media (width <= 640px) {
          margin-bottom:.8rem;
          &.p-t-justify {
            word-break:break-all;
          }
        }
      }
    }
    .l-button-A {
      margin-top:auto;
    }
    .p-vertical_text-A {
      position:absolute;
      top:0;
      @media (width > 640px) {
        right:calc(100% + 1.0rem);
      }
      @media (width <= 640px) {
        left:0;
      }
    }
  }
  .js-carousel-count-A {
    margin-top:6.0rem;

    @media (width <= 640px) {
      display:grid;
      row-gap:.8rem;
      margin-top:3.0rem;
    }
    .splide__pagination {
      @media (width <= 640px) {
        grid-row:1/2;
        width:100%;
      }
    }
    .arrows_number {
      @media (width <= 640px) {
        grid-row:2/3;
        margin-left:auto;
      }
    }
  }

  &:not(.is-active) {
    .js-carousel-count-A {
      display:none;
    }
  }
}
/* 3カラム */
.l-column3-carousel {
  &:not(.is-active) {
    .splide__list {
      @media (width > 640px) {
        grid-template-columns:repeat(3,1fr);
        gap:8.0rem;
      }
    }
  }
}
/* 4カラム */
.l-column4-carousel {
  &:not(.is-active) {
    .splide__list {
      @media (width > 640px) {
        grid-template-columns:repeat(4,1fr);
        gap:5.6rem;
      }
    }
  }
}


/* 注意ボックス
============================================================================= */
.l-caution_box-A {
  border:1px solid var(--cc-gray_line-A);
  position:relative;
  @media (width > 640px) {
    display:grid;
    grid-template-columns:auto 52.4rem;
    justify-content: space-between;
    align-items: flex-start;
    padding:5.4rem 8.6rem;
  }
  @media (width <= 640px) {
    padding:3.6rem;
  }
  &::before {
    content:"";
    border:1px solid var(--cc-gray_line-A);
    position:absolute;
    inset:.6rem;
    pointer-events: none;
  }

  .heading {
    text-decoration: underline;
    text-underline-offset:3px;
    @media (width <= 640px) {
      margin-bottom:3.2rem;
    }
  }
}


/* カルーセルとテキスト横並び
============================================================================= */
.l-horizontal-carousel_text {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .inner {
    @media (width > 640px) {
      display:grid;
      grid-template-columns:1fr 38.4rem;
      column-gap:8.0rem;
      align-items: center;
      width:calc(50% + 68.0rem);
    }
    @media (width <= 640px) {
      display:flex;
      flex-direction: column;
    }
  }
  .carousel {
    @media (width > 640px) {
      grid-column:1/2;
      overflow:hidden;
      margin-bottom:calc(var(--mb-B) * -1);
      padding-bottom:var(--mb-B);
    }
    @media (width <= 640px) {
      display:contents;
    }
    .js-carousel-A {
      position:relative;
      @media (width > 640px) {
        margin-left:auto;
        width:89.6rem;
      }
      @media (width <= 640px) {
        display:contents;
        margin-right:var(--pi-sp-30);
      }
      .splide__track {
        @media (width > 640px) {
          overflow:visible;
        }
      }
    }
    .js-carousel-count-A {
      @media (width > 640px) {
        margin-top:5.6rem;
      }
      @media (width <= 640px) {
        display:grid;
        grid-template-columns: 1fr auto;
        margin-top:2.4rem;
        margin-inline:var(--pi-sp-30);

        .splide__pagination {
          grid-column:1/-1;
          width:100%;
        }
        .arrows_number {
          grid-column:2/3;
          margin-top:.8rem;
        }
      }
    }
  }
  .text {
    @media (width > 640px) {
      grid-column:2/3;
    }
    @media (width <= 640px) {
      margin-top:2.4rem;
    }
  }
  .text-heading {
    @media (width <= 640px) {
      margin-bottom:.8rem;
    }
  }
  .text-desc {
    color:var(--cc-gray_text-A);
  }
}


/* 宴会会場スペック表
============================================================================= */
.l-banquet-spec_table {
  @media (width <= 640px) {
    width:100%;
    padding-inline:5.0rem;
  }
  table {
    --max:1060;
    border-left:1px solid var(--cc-gray_line-A);
    border-bottom:1px solid var(--cc-gray_line-A);
    table-layout: fixed;
    line-height:1.6;
    overflow:hidden;
    border-collapse: separate;
    border-spacing: 0;
    @media (width > 640px) {
      width:100%;
    }
    @media (width <= 640px) {
      width:96.0rem;
    }
  }
  col {
    width:calc(var(--w) / var(--max) * 100%);
  }
  th,td {
    padding:1.6rem 0;
    border-top:1px solid var(--cc-gray_line-A);
    border-right:1px solid var(--cc-gray_line-A);
    vertical-align: middle;
    text-align: center;
    @media (width <= 640px) {
      padding-block:1.2rem;
    }

    &.-no_pb {
      padding-block:0;
    }
  }
  .th1 {
    background-color:rgb(from #DADADA r g b / .3);
  }
  .th2 {
    padding-inline:2.4rem;
    text-align: left;
    @media (width <= 640px) {
      padding-inline:1.6rem;
    }
  }
  tbody {
    tr {
      &:nth-child(odd) :is(.th2,td) {
        background-color:var(--cc-gray_back-A);
      }
      &:nth-child(even) :is(.th2,td) {
        background-color:#fff;
      }
    }
  }
  .table-note {
    margin-top:.8rem;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      display:grid;
      grid-template-columns: calc(100vw - var(--pi-sp-30) - 5.0rem) 1fr;
      grid-auto-flow: column;
      width:100%;
      font-size:1.2rem;
      &::after {
        content:"";
      }
    }
    > li {
      @media (width > 640px) {
        display:flex;
        flex-wrap:wrap;
        gap:1.6rem;
        width:fit-content;
        margin-left:auto;
      }
      @media (width <= 640px) {
        position:sticky;
        left:5.0rem;
      }
      > span {
        display:block;
        @media (width > 640px) {
          width:fit-content;
          margin-left:auto;
        }
      }
    }
  }
  .simplebar-horizontal {
    margin-left:5.0rem;
  }
}


/* Tabメニュー
============================================================================= */
.l-tab_menu-A {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .menu-contents {
    display:grid;
    gap:10.4rem;
    padding-top:10.4rem;
    @media (width <= 640px) {
      gap:5.2rem;
      padding-top:4.8rem;
    }
  }
  .contents-item {
    @media (width > 640px) {
      display:grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 50.4rem 1fr;
      grid-auto-flow: column;
      align-items: flex-start;
      gap:4.0rem 9.6rem;
    }
    @media (width <= 640px) {
      display:flex;
      flex-direction: column;
    }
    .item-img {
      position:relative;
      background-color:var(--cc-gray_back-A);
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:1/2;
      }
      .img-tag {
        padding-block:1.2rem;
        padding-inline:1.6rem 2.5rem;
        position:absolute;
        top:1.7rem;
        font-size:1.4rem;
        line-height:1;
        letter-spacing: .12em;
        clip-path:polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%);
      }
      img {
        width:100%;
        height:auto;
        aspect-ratio: 16/13;
        object-fit:contain;
      }
    }
    .item-text {
      @media (width > 640px) {
        grid-row:1/2;
        grid-column:2/3;
      }
      @media (width <= 640px) {
        display:contents;
      }
      .text-heading {
        margin-bottom:2.4rem;
        @media (width <= 640px) {
          margin-block:4.0rem 1.6rem;
        }
      }
      .text-desc {
        margin-bottom:2.4rem;
        @media (width <= 640px) {
          margin-bottom:4.0rem;
        }
      }
      .l-table-A {
        dt {
          padding-left:0;
        }
        .plice {
          font-size:1.4rem;
          @media (width <= 640px) {
            font-size:1.3rem;
          }
          .amount {
            display:inline-flex;
            align-items: baseline;
            line-height:1;
            @media (width > 640px) {
              margin-inline:.8rem;
            }
            > small {
              font-size:inherit;
            }
            .n {
              font-size:2.2rem;
              @media (width <= 640px) {
                font-size:2.0rem;
              }
            }
          }
        }
        .note {
          @media (width <= 640px) {
            display:block;
          }
        }
      }
      .l-button-C {
        margin-top:4.0rem;
        @media (width <= 640px) {
          order:100;
          margin-top:2.4rem;
        }
      }
    }
    .js-accordion-group {
      @media (width > 640px) {
        grid-column:1/-1;
      }
      @media (width <= 640px) {
        margin-top:4.0rem;
      }
    }
    .js-accordion-button {
      display:flex;
      justify-content: center;
      align-items: center;
      gap:1.4rem;
      margin-inline:auto;
      padding-bottom:.1em;
      width:100%;
      min-height:5.6rem;
      color:var(--cc-red-A);
      background-color:var(--cc-gray_back-A);
      position:relative;
      transition-property:opacity;
      transition-duration: var(--duration-hover-A);
      z-index: 1;

      &::before {
        content:"CLOSE";
      }

      @media (width > 640px) { /* PC */
      }
      @media (width <= 640px) { /* SP */
      }

      @media (hover:hover) {
        &:hover {
          opacity:.7;
        }
      }
      &:is([aria-expanded="false"]) {
        &::before {
          display:none;
        }
        > i::after {
          transform:rotate(-90deg);
        }
      }
      &:is([aria-expanded="true"]) {
        > span {
          display:none;
        }
        > i::before {
          transform:rotate(180deg);
        }
      }
      > i {
        display:flex;
        justify-content: center;
        align-items: center;
        width:1.4rem;
        height:1.4rem;
        position:relative;
        bottom:.05em;
        &::before,&::after {
          content:"";
          width:100%;
          height:2px;
          background-color:var(--cc-red-A);
          position:absolute;
          transition-property:transform;
          transition-duration: var(--duration-hover-A);
        }
      }
    }
    .js-accordion-target {
      background-color:var(--cc-gray_back-A);
    }
    .js-accordion-target_inner {
      @media (width > 640px) {
       padding:6.4rem 12.0rem 10.4rem;
      }
      @media (width <= 640px) {
       padding-bottom:1.6rem;
      }
      .l-table-A {
        @media (width > 640px) {
        }
        > div {
          @media (width <= 640px) {
            padding-inline:3.0rem;
          }
        }
      }
    }
  }
  .menu-single {
    display:grid;
    margin-top:10.4rem;
    @media (width > 640px) {
      grid-template-columns: 1fr 1fr;
      gap:4.8rem;
      margin-inline:auto;
      width:104.0rem;
      &:has(.other-item:nth-child(1):last-child) {
        grid-template-columns: 49.6rem;
        justify-content: center;
      }
    }
    @media (width <= 640px) {
      gap:1.6rem;
      margin-top:5.6rem;
    }
    .other-item {
      display:grid;
      grid-template-columns: 18.4rem 1fr auto;
      align-items: center;
      padding-block:.8rem;
      padding-right:2.4rem;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        grid-template-columns: 12.4rem 1fr auto;
      }
    }
    .item-img {
      img {
        width:100%;
        height:auto;
        aspect-ratio: 16/9;
      }
    }
    .item-name {
      margin-inline:auto;
    }
  }
}


/* ニュースコンテナ
============================================================================= */
.l-news_container {
  @media (width > 640px) {
    display:grid;
    grid-template-columns:calc(50% - 44.0rem) 1fr;
    grid-auto-flow: column;
    &:has(.news_container-main > .inner.-single) {
      padding-top:8.0rem;
    }
  }
  @media (width <= 640px) {
  }

  .news_container-main {
    @media (width > 640px) {
      grid-column:2/3;
    }
    @media (width <= 640px) {
    }
    > .inner {
      @media (width > 640px) {
      }
      @media (width <= 640px) {
      }

      &.-archive {
        @media (width > 640px) {
          padding-top:8.0rem;
          margin-left:16.0rem;
          width:88.0rem;
        }
        @media (width <= 640px) {
          padding-block:6.4rem;
        }
      }

      &.-single {
        @media (width > 640px) {
          padding-top:8.0rem;
          margin-left:16.0rem;
          width:88.0rem;
        }
        @media (width <= 640px) {
          padding-block:8.0rem;
        }
      }
    }
  }

  .news_container-sub {
    @media (width > 640px) {
      grid-column:1/2;
    }
    @media (width <= 640px) {
      padding-block:6.4rem;
    }

    > .inner {
      @media (width > 640px) {
        position:sticky;
        top:calc(var(--header-height) + 4.0rem);
        margin-left:auto;
        width:28.0rem;
      }
    }

    .sub-heading {
      display:grid;
      gap:1.0rem;
      line-height:1;
      @media (width > 640px) {
        margin-block:8.0rem 2.8rem;
      }
      @media (width <= 640px) {
        margin-bottom:4.0rem;
        &:not(:first-of-type) {
          margin-top:6.4rem;
        }
      }

      .en {
        font-size:2.4rem;
        letter-spacing: .05em;
      }
      .ja {
        font-size:1.2rem;
        letter-spacing: .12em;
      }
    }
    .sub-list {
      display:grid;
      row-gap:1.2rem;
      font-size:1.5rem;
      line-height:1.5;
      color:var(--cc-gray_text-A);
      @media (width <= 640px) {
        grid-template-columns:1fr 1fr;
        row-gap:1.2rem;
        font-size:1.4rem;
      }

      .item {
        > a {
          display:flex;
          align-items: center;
          gap:.8rem;
          width:fit-content;
          transition-property: color;
          transition-duration: var(--duration-hover-A);

          @media (hover:hover) {
            &:hover {
              color:var(--cc-black-A);
              &::after {
                background-color:var(--cc-black-A);
              }
            }
          }

          &::after {
            background-color:var(--cc-gray_text-A);
            transition-property: background-color;
            transition-duration: var(--duration-hover-A);
          }
        }

        &.-current {
          > a {
            border-bottom:1px solid;
            color:var(--cc-black-A);
            &::after {
              background-color:var(--cc-black-A);
            }
          }
        }
      }
    }
  }
}


/* ニュースカテゴリタイトル
============================================================================= */
.l-news_archive-heading {
  margin-bottom:2.8rem;
  @media (width <= 640px) {
    margin-bottom:1.6rem;
  }
}


/* ニュースリスト
============================================================================= */
.l-news_list {
  display: grid;

  @media (width > 640px) {
    grid-template-columns: repeat(3,1fr);
    gap:8.0rem 5.0rem;
  }
  @media (width <= 640px) {
    gap:3.2rem;
  }
  .news_list-item {

    > a {
      @media (width <= 640px) {
        display:grid;
        grid-template-columns:16.0rem 1fr;
        grid-template-rows:auto 1fr;
        align-items: flex-start;
        column-gap:1.6rem;
      }
    }
  }
  .item-img {
    height: auto;
    aspect-ratio: 160/107;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      grid-row:1/-1;
      grid-column:1/2;
    }
  }

  .item-date_cat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    line-height:1;
    @media (width > 640px) {
      margin-block: 2.4rem 1.2rem;
      gap:1.6rem;
    }
    @media (width <= 640px) {
      display:flex;
      flex-wrap:wrap;
      justify-content: space-between;
      gap:.4rem .8rem;
      margin-bottom:1.0rem;
    }

    .date {
      display:flex;
      align-items: center;
      padding-top:.1rem;
      gap:1.0rem;
      font-size:1.4rem;
      letter-spacing: .05em;
      color:var(--cc-gray_text-A);
      @media (width <= 640px) {
        margin-top:.2rem;
        flex-shrink: 0;
        font-size:1.2rem;
        gap:.7rem;
      }

      &::before {
        content:"";
        display:block;
        border-bottom:1px solid var(--cc-gold-A);;
        width:1.0rem;
        @media (width <= 640px) {
          width:.8rem;
        }
      }
    }
    .category {
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      font-size:1.3rem;
      @media (width <= 640px) {
        max-width:100%;
        flex-shrink: 0;
        font-size:1.2rem;
        gap:.4rem;
      }

      > li {
        color:#fff;
        background-color:var(--cc-gold-A);
        text-align: center;
        padding:.3rem .5em .2rem;
        @media (width > 640px) {
          min-width:6.0rem;
        }
        @media (width <= 640px) {
          padding:.4rem .5em .2rem;
        }

      }
    }
  }

  .item-title {
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: .16em;

    @media (width <= 640px) {
      font-size: 1.3rem;
      line-height: 1.7;
      letter-spacing: .12em;
    }
  }
}


/* 一覧ページャー
============================================================================= */
.l-archive-pager {
  margin-top:8.0rem;
  display:flex;
  justify-content: center;

  @media (width <= 640px) {
    margin-top:4.8rem;
  }

  & > .wp-pagenavi {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:1.6rem;
    padding-inline:5.0rem;
    font-size:1.6rem;
    line-height:1;
    letter-spacing: 0;
    color:var(--cc-black-A);
    position:relative;

    @media (width <= 640px) {
      padding-inline:3.6rem;
      font-size:1.3rem;
      gap:.8rem;
    }
  }

  a,.wp-pagenavi > span {
    display:flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    text-align:center;
    transition:color .3s;


    &:not(.extend) {
      width:2.4rem;
      height:auto;
      aspect-ratio: 1/1.25;

      @media (hover:hover) {
        transition-property: color;
        transition-duration: var(--duration-hover-A);
        &:is(a):hover {
          color:var(--cc-black-A);
        }
      }
    }
    &:not(.current,.extend,.previouspostslink,.nextpostslink) {
      color:var(--cc-gray_line-A);
    }
    &:is(.current) {
      border-bottom:1px solid;
    }
    &:is(.extend) {
      width:12px;
      background-image:radial-gradient(circle at center, var(--cc-gray_line-A) 0%, var(--cc-gray_line-A) 50%, transparent 50%, transparent 100%);
      background-size: 4px 4px;
      background-position: center;
      background-repeat: repeat-x;
    }
    &:not(.extend,.previouspostslink,.nextpostslink,.first,.last) {

    }
    &:is(.previouspostslink,.nextpostslink) {
      position:absolute;
    }
    &:is(.previouspostslink,.nextpostslink) {
      display:flex;
      justify-content: center;
      align-items: center;

      &::after {
        content:"";
        display:block;
        width:1.5rem;
        height:auto;
        aspect-ratio:1/1;
        background-color:var(--cc-black-A);
        mask-image:url(/sapporo/assets/svg/arrow_right_a.svg);
        mask-position:center;
        mask-size: contain;
      }
    }
    &:is(.previouspostslink) {
      left:0;
      transform:scaleX(-1);
    }
    &:is(.nextpostslink) {
      right:0;
    }
  }
}


/* ニュース詳細
============================================================================= */
.l-single-A {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .single-date_cat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    line-height:1;
    @media (width > 640px) {
      margin-block: 2.4rem 1.2rem;
      gap:1.6rem;
    }
    @media (width <= 640px) {
      display:flex;
      flex-wrap:wrap;
      gap:.4rem .8rem;
      margin-bottom:1.2rem;
    }

    .date {
      display:flex;
      align-items: center;
      padding-top:.1rem;
      gap:1.0rem;
      font-size:1.4rem;
      letter-spacing: .05em;
      color:var(--cc-gray_text-A);
      @media (width <= 640px) {
        margin-top:.2rem;
        flex-shrink: 0;
        font-size:1.2rem;
        gap:.7rem;
      }

      &::before {
        content:"";
        display:block;
        border-bottom:1px solid var(--cc-gold-A);;
        width:1.0rem;
        @media (width <= 640px) {
          width:.8rem;
        }
      }
    }
    .category {
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      font-size:1.3rem;
      @media (width <= 640px) {
        max-width:100%;
        flex-shrink: 0;
        font-size:1.2rem;
        gap:.4rem;
      }

      > li {
        > a {
          display:block;
          color:#fff;
          background-color:var(--cc-gold-A);
          text-align: center;
          padding:.3rem .5em .2rem;
          @media (width > 640px) {
            min-width:6.0rem;
          }
          @media (width <= 640px) {
            padding:.4rem .5em .2rem;
          }
        }
      }
    }
  }

  .single-title {
    margin-bottom:4.8rem;

    @media (width <= 640px) {
      margin-bottom:3.2rem;
    }
  }

  .single-keyvisual {
    margin-bottom:4.0rem;

    @media (width <= 640px) {
      margin-bottom:2.4rem;
    }
    img {
      width:100%;
    }
  }
}


/* 詳細ページャー
============================================================================= */
.l-single-pager {
  margin-top:8.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    margin-top:6.4rem;
  }
}



/* プランの3カラム並び
============================================================================= */
.l-plan-column {
  display:grid;
  @media (width > 640px) {
    grid-template-columns: repeat(3,1fr);
    gap:8.0rem;;
  }
  @media (width <= 640px) {
    gap:6.4rem;
  }

  .item {
    position:relative;
    @media (width > 640px) {
      transition-property: opacity;
      transition-duration:var(--duration-hover-A);
      @media (hover:hover) {
        &:has(.l-button-C:hover) {
          opacity:.7;
        }
      }
    }
    .item-link {
      display: block;
      transition: opacity .5s;
    }
    .item-link:hover {
      opacity: 0.6;
    }
  }

  .item-img {
    margin-bottom:2.4rem;
    position:relative;
    height:auto;
    aspect-ratio: 400/325;
    background-color:var(--cc-gray_back-A);
    .img-tag {
      padding-block:1.2rem;
      padding-inline:1.6rem 2.5rem;
      position:absolute;
      top:1.7rem;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .12em;
      clip-path:polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%);
    }
  }
  .item-title {
    font-size:1.8rem;
    line-height:1.8;
    letter-spacing: .16em;
  }
}




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