:root {
    --title-shadow: 0px 2px 12px rgba(0, 0, 0, 0.60);
  }
  
  *,
  *::before,
  *::after {
    min-width: 0px;
    min-height: 0px;
  }
  
  body {
    font-family: var(--font-sans);
    color: var(--ink);
    background-color: var(--off-white);
    letter-spacing: 0;
  }
  
  #root {
    max-width: 1920px;
    margin: 0 auto;
  }
  
  p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: inherit;
    line-height: inherit;
  }
  
  img, iframe {
    max-width: 100%;
  }
  iframe {
    border: none;
    box-shadow: none;
  }
  
  a, a:hover {
    color: var(--ink);
  }
  
  [id] {
    scroll-margin-top: 3.75rem;
  }
  
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  
  button {
    position: relative;
    appearance: none;
    cursor: pointer;
    box-shadow: none;
    border: 0;
    outline: none;
    background: none;
    padding: 0;
  }
  
  .list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1.5rem;
    list-style: disc outside none;
  
    & > p {
      margin: 0;
      display: list-item;
    }
  }
  
  .webgene-pagination {
    & ul {
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 1.25rem;
      padding: 0;
      margin: 0;
  
      & li {
        & a {
          display: inline-block;
          width: 3rem;
          line-height: 3rem;
          text-align: center;
          border-radius: 9999px;
          background-color: var(--ink);
          color: var(--snow);
          &:hover {
            text-decoration: none;
            color: var(--snow);
          }
        }
  
        &.selected {
          & a {
            background-color: var(--sky-2);
            &:hover {}
          }
        }
      }
    }
  }
  
  .webgene-no-items {
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
  }
  
  .thumbnail {
    position: relative;
  
    &.thumbnail--16x9 {
      padding-top: 56.25%;
    }
  
    & img,
    &:empty::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  
    &:empty::before {
      content: "";
      background-image: url("/system_panel/uploads/images/ogp.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
  }
  
  .article-body {
    & > p {
      margin: 1em 0;
    }
  
    & > h1,
    & > h2,
    & > h3,
    & > h4,
    & > h5,
    & > h6 {
      margin: 2em 0 1em;
    }
  
    & > *:first-child {
      margin-top: 0;
    }
  
    & > *:last-child {
      margin-bottom: 0;
    }
  
    & a,
    & a:hover {
      color: var(--blue);
      text-decoration: underline;
    }
  }
  
  .backdrop-object {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  .page-hero-title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    
    @media screen and (min-width: 768px) {
      gap: 1.5rem;
    }
    
    & .page-hero-title__en {
      line-height: 1;
      letter-spacing: 0.16em;
      font-weight: 600;
      font-size: 1.125rem;
      color: var(--yellow-1);
      text-shadow: var(--title-shadow);
      
      @media screen and (min-width: 768px) {
        font-size: 1.75rem;
      }
      @media screen and (min-width: 1024px) {
        font-size: 2rem;
      }   
    }
    
    & .page-hero-title__ja {
      line-height: 1.25;
      letter-spacing: 0.08em;
      font-weight: 900;
      font-size: 1.75rem;
      color: var(--snow);
      text-shadow: var(--title-shadow);
      &.page-hero-title__ja--tracking-0 {
        letter-spacing: 0;
      }
      
      @media screen and (min-width: 768px) {
        font-size: 2.5rem;
        &.page-hero-title__ja--tracking-0 {
          letter-spacing: 0.08em;
        }
      }
      @media screen and (min-width: 1024px) {
        font-size: 3rem;
      }   
    }
  }
  
  .page-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 100%;
    height: 1.75rem;
    @media screen and (min-width: 768px) {
      height: 3rem;
    }
    @media screen and (min-width: 1024px) {
      height: 5.625rem;
    }
  }  
  
  .page-hero-logo {
    position: absolute;
    top: 0;
    left: 20px;
    width: 15rem;
    
    @media screen and (min-width: 768px) {
      left: 40px;
      width: 20rem;
    }
    @media screen and (min-width: 1024px) {
      top: -20px;
      left: 80px;
      width: 25rem;
    }
    @media screen and (min-width: 1200px) {
      left: 160px;
      width: 27.5rem;
    }
  }
  
  .swiper:not(.swiper-initialized) .swiper-wrapper {
    overflow: auto;
    display: flex;
    
    & .swiper-slide {
      min-width: 100%;
    }
  }
  
  .swiper.slide-gallery .swiper-wrapper,
  .swiper.shop-gallery .swiper-wrapper,
  .swiper.shop-gallery--reverse .swiper-wrapper {
    transition-timing-function: linear;
  }
  
  .section-title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    
    & .section-title__en {
      line-height: 1;
      letter-spacing: 0.16em;
      font-weight: 600;
      font-size: 1.125rem;
      color: var(--sky-2);
      
      @media screen and (min-width: 768px) {
        font-size: 1.75rem;
      }
      @media screen and (min-width: 1024px) {
        font-size: 2rem;
      }   
    }
    
    & .section-title__ja {
      line-height: 1.25;
      letter-spacing: 0.12em;
      font-weight: 500;
      font-size: 1.75rem;
      color: var(--ink);
      &.section-title__ja--tracking-0 {
        letter-spacing: 0;
      }
      @media screen and (min-width: 414px) {
        &.section-title__ja--tracking-0 {
          letter-spacing: 0.12em;
        }
      }
      @media screen and (min-width: 768px) {
        font-size: 2.5rem;
      }
      @media screen and (min-width: 1024px) {
        font-size: 3rem;
      }   
    }
    
    &.section-title--yellow-1 {
      & .section-title__en {
        color: var(--yellow-1);
      }
      & .section-title__ja {
        color: var(--snow);
      }
    }
    
    &.section-title--blue {
      & .section-title__en {
        color: var(--blue);
      }
    }
    
    &.section-title--start {
      text-align: start;
    }
    
    &.section-title--sm {
      & .section-title__en {
        font-size: 0.875rem;
        
        @media screen and (min-width: 768px) {
          font-size: 1.125rem;
        }
      }
      & .section-title__ja {
        font-size: 1.125rem;
        
        @media screen and (min-width: 768px) {
          font-size: 1.75rem;
        }
        @media screen and (min-width: 1024px) {
          font-size: 2rem;
        }
      }
    }
  }
  
  .section-wave {
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 100%;
    height: 1.3125rem;
    @media screen and (min-width: 768px) {
      height: 3rem;
    }
    @media screen and (min-width: 1024px) {
      height: 5.625rem;
    }
  }  
  
  .numbered-item {
    position: absolute;
    top: 0;
    left: -12px;
    display: flex;
    letter-spacing: 0.16em;
    line-height: 1;
    font-weight: 700;
    color: var(--snow);
    text-shadow: var(--sky-2) 1px 0 10px;
    
    @media screen and (min-width: 768px) {
      left: -20px;
    }
    
    & .numbered-item__typo {
      font-size: 1.75rem;
      
      @media screen and (min-width: 768px) {
        font-size: 2rem;
      }
    }
    
    & .numbered-item__num {
      position: relative;
      font-size: 2.5rem;
      align-self: end;
      margin-top: 1.75rem;
      
      @media screen and (min-width: 768px) {
        font-size: 3rem;
        margin-top: 2rem;
      }
      
      &::before {
        content: "";
        display: block;
        height: 1px;
        width: 100px;
        background-color: var(--snow);
        transform: rotate(-30deg);
        position: absolute;
        top: 8px;
        left: -60px;
        box-shadow: var(--sky-2) 1px 0 10px;
        
        @media screen and (min-width: 768px) {
          width: 120px;
          top: 4px;
        }
      }
    }
    
    &.numbered-item--yellow-1 {
      color: var(--yellow-1);
      text-shadow: none;
      
      & .numbered-item__num {
        &::before {
          background-color: var(--yellow-1);
          box-shadow: none;
        }
      }
    }
    &.numbered-item--orange {
      color: var(--orange);
      text-shadow: none;
      
      & .numbered-item__num {
        &::before {
          background-color: var(--orange);
          box-shadow: none;
        }
      }
    }
    &.numbered-item--snow {
      color: var(--snow);
      text-shadow: none;
      
      & .numbered-item__num {
        &::before {
          background-color: var(--snow);
          box-shadow: none;
        }
      }
    }
    &.numbered-item--sky-2 {
      color: var(--sky-2);
      text-shadow: none;
      
      & .numbered-item__num {
        &::before {
          background-color: var(--sky-2);
          box-shadow: none;
        }
      }
    }
    
    &.numbered-item-no-absolute {
      position: static;
    }
  }
  
  .image-filter--black-40 {
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: hsl(0 0 0 / 40%);
      pointer-events: none;
    }
  }
  
  .image-filter--black-60 {
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: hsl(0 0 0 / 60%);
      pointer-events: none;
    }
  }
  
  .button {
    --button-color: var(--sky-2);
    --shadow-color: var(--button-color);
    position: relative;
    display: flex;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25rem;
    color: var(--snow);
    background-color: var(--button-color);
    transition: transform ease 500ms;
    animation: bounce 4s linear infinite;
    
    &:hover {
      text-decoration: none;
      color: var(--snow);
      transform: scale(1.03);
      animation: none;
    }
    &:active {
      transform: scale(1.01);
      animation: none;
    }
    
    &::before {
      --pulse-shadow-alpha: hsl(from var(--shadow-color) h s l / 60%);
      content: "";
      background-color: var(--shadow-color);
      position: absolute;
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 9999px;
      box-shadow: 0 0 0 0 var(--pulse-shadow-alpha);
      animation: pulse-shadow 2s infinite linear;
    }
    
    &.button--yellow-2 {
      --pulse-shadow-alpha: 80%;
      --button-color: var(--yellow-2);
      color: var(--ink);
    }
    &.button--blue {
      --button-color: var(--blue);
    }
    &.button--on-vivid {
      --shadow-color: var(--snow);
    }
    &.button--ink {
      --button-color: var(--ink);
    }
  }
  
  @keyframes pulse-shadow {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 var(--pulse-shadow-alpha);
    }
    25% {
      opacity: 0.5;
      transform: scale(1.01);
      box-shadow: 0 0 4px 4px var(--pulse-shadow-alpha);
    }
    50% {
      opacity: 0;
      transform: scale(1.02);
      box-shadow: 0 0 6px 6px var(--pulse-shadow-alpha);
    }
    100% {
      opacity: 0;
      transform: scale(1);
      box-shadow: 0 0 0 0 var(--pulse-shadow-alpha);
    }
  }
  
  @keyframes bounce {
    0% {
      transform: scale(1);
    }
    10% {
      transform: scale(1);
    }
    12% {
      transform: scale(1.02);
    }
    14% {
      transform: scale(1);
    }
    20% {
      transform: scale(1);
    }
    22% {
      transform: scale(1.02);
    }
    24% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .info-table {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.75rem;
    
    @media screen and (min-width: 768px) {
      font-size: 0.875rem;
    }
    
    & .info-table__row {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      
      @media screen and (min-width: 768px) {
        flex-direction: row;
      }
    }
    
    & .info-table__title {
      display: flex;
      flex-direction: column;
      flex: 1 0 0%;
      padding: 0.5rem;
      background-color: var(--blue);
      color: var(--snow);
      font-weight: 700;
      border-radius: 0.5rem;
      @media screen and (min-width: 768px) {
        padding: 1rem;
        border-radius: 0.75rem;
      }
      @media screen and (max-width: 767px) {
        max-width: unset !important;
      }
    }
    
    & .info-table__content {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      flex: 1 0 0%;
      padding: 0.5rem;
      background-color: var(--snow);
      color: var(--blue);
      font-weight: 500;
      border-radius: 0.5rem;
      @media screen and (min-width: 768px) {
        padding: 1rem;
        border-radius: 0.75rem;
      }
    }
    
    &.info-table--on-snow .info-table__content {
      background-color: var(--off-white);
    }
    
    &.info-table--lg {
      @media screen and (min-width: 768px) {
        font-size: 1rem;
      }
      @media screen and (min-width: 1024px) {
        font-size: 1.125rem;
      }
    }
    
    &.info-table--clubhouse {
      flex-direction: row;
      gap: 0.5rem;
      
      & .info-table__row {
        flex-direction: column;
        flex: 1 0 0%;
        
        & > * {
          flex: 1 0 0%;
        }
      }
    }
  }
  
  .form-selector__button {
    color: var(--sky-1);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--sky-1);
    cursor: pointer;
    
    &.selected {
      color: var(--snow);
      background-color: var(--sky-1);
      border: unset;
    }
  }
  
  .shop-hero {
    position: relative;
    height: auto;
    min-height: calc(var(--vh, 1vh) * 130);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    @media screen and (min-width: 414px) {
      min-height: calc(var(--vh, 1vh) * 115);
    }
    @media screen and (min-width: 768px) {
      min-height: calc(var(--vh, 1vh) * 100);
    }
    
    & .shop-hero__title-box {
      max-width: 90rem;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      letter-spacing: 0.08em;
      line-height: 1.25;
      color: var(--snow);
      
      & .shop-hero__title {
        font-weight: 900;
        font-size: 1.5rem;
        text-shadow: var(--title-shadow);
        
        @media screen and (min-width: 768px) {
          font-size: 2.75rem;
        }
        @media screen and (min-width: 1024px) {
          font-size: 3rem;
        }
      }
      
      & .shop-hero__text {
        font-weight: 700;
        font-size: 1rem;
        text-shadow: var(--title-shadow);
        
        @media screen and (min-width: 768px) {
          font-size: 2.5rem;
        }
        @media screen and (min-width: 1024px) {
          font-size: 2rem;
        }
      }
    }
    
    & .shop-hero__dec {
      position: relative;
      z-index: 1;
      width: 100%;
    }
    
    & .shop-hero__link {
      width: 6.25rem;
      transition: opacity ease 200ms;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      align-items: center;
      line-height: 1;
      font-size: 0.625rem;
      font-weight: 500;
      
      @media screen and (min-width: 768px) {
        width: 10rem;
        font-size: 0.75rem;
      }
      
      &:hover {
        text-decoration: none;
        opacity: 80%;
      }
      
      & img {
        width: 2.5rem;
        
        @media screen and (min-width: 768px) {
          width: 3.75rem;
        }
      }
    }
  }
  
  .category-list {
    & .webgene-blog {
      display: flex;
      flex-wrap:wrap;
      flex-direction: row;
      justify-content: center;
      column-gap: 1rem;
      row-gap: 0.75rem;
    }
    & .webgene-item a {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border-radius: 9999px;
      background-color: var(--blue);
      color: var(--snow);
      transition: opacity 250ms ease;
      line-height: 1.25;
      &:hover {
        color: var(--snow);
        opacity: 0.85;
        text-decoration: none;
      }
    }
  }
  .blog-list {
    & .webgene-blog {
      display: grid;
      gap: 2rem;
    }
    @media screen and (min-width: 768px) {
      & .webgene-blog {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
      & .webgene-no-items, & .webgene-pagination {
        grid-column: span 2 / span 2;
      }
    }
    @media screen and (min-width: 1200px) {
      & .webgene-blog {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }
      & .webgene-no-items, & .webgene-pagination {
        grid-column: span 4 / span 4;
      }
    }
  }
  .blog-item {
    & a {
      display: block;
      border-radius: 1.5rem;
      overflow: hidden;
      background-color: var(--snow);
      
      @media screen and (min-width: 1024px) {
        border-radius: 2rem;
      }
      &:hover .thumbnail img {
        transform: scale(1.1);
      }
    }
    & .blog-item__media {
      position: relative;
      & .thumbnail {
        padding-top: 66.6666%;
        overflow: hidden;
        
        & img {
          transition: transform 300ms linear;
        }
      }
    }
    & .blog-item__category {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      font-size: 0.875rem;
      line-height: 1.2;
      letter-spacing: 0.08em;
      color: var(--yellow-2);
      background-color: var(--ink);
      border-top-right-radius: 9999px;
      padding: 0.5rem 2rem;
    }
    & .blog-item__title {
      line-height: 1.25;
      font-size: 1.125rem;
      font-weight: 500;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    & .blog-item__summary {
      line-height: 1.5;
      font-size: 0.75rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  
  #news-list .blog-list .webgene-item a {
    background-color: var(--off-white);
  }
  
  .blog-detail {
    position: relative;
    padding-top: 10rem;
    
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image: url("/system_panel/uploads/images/20250721135302691817.jpg");
      opacity: 0.15;
    }
    
    @media screen and (min-width: 1024px) {
      padding-top: 15rem;
      padding-left: 3.75rem;
      padding-right: 3.75rem;
    }
    @media screen and (min-width: 1200px) {
      padding-left: 5rem;
      padding-right: 5rem;
    }
    
    & .blog-detail__container {
      padding: 2.5rem 1.25rem 5rem;
      background-color: hsl(from var(--snow) h s l / 40%);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      
      @media screen and (min-width: 768px) {
        padding: 2.5rem 2.5rem 7.5rem;
      }
      @media screen and (min-width: 1024px) {
        padding: 3.75rem;
        max-width: 1080px;
        margin: 0 auto;
        width: 100%;
        border-radius: 3rem;
        margin-bottom: 5rem;
        background-color: var(--snow);
      }
      @media screen and (min-width: 1200px) {
        padding: 5rem;
      }
    }
  }
  
  .blog-slider {
    & .swiper-button-prev, & .swiper-button-next {
      background-image: url("/system_panel/uploads/images/circle-arrow.svg");
      width: 3rem;
      height: 3rem;
      background-size: contain;
      background-repeat: no-repeat;
      position: static;
      margin: 0 !important;
      &::after, &::before {
        content: none;
      }
    }
    & .swiper-button-prev {
      transform: rotate(180deg);
    }
    
    padding-bottom: 2rem;
    overflow: visible;
  }
  
  .blog-slider {
    & .swiper-button-prev, & .swiper-button-next {
      background-image: url("/system_panel/uploads/images/circle-arrow.svg");
      width: 3rem;
      height: 3rem;
      background-size: contain;
      background-repeat: no-repeat;
      position: static;
      &::after, &::before {
        content: none;
      }
    }
    & .swiper-button-prev {
      transform: rotate(180deg);
    }
    
    padding-bottom: 2rem;
    overflow: visible;
  }
  
  .sns-banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.25rem 1rem;
    color: var(--snow);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.12em;
    border-radius: 1rem;
    transition: opacity ease 200ms;
    @media screen and (min-width: 768px) {
      font-size: 1.5rem;
    }
    
    &:hover {
      text-decoration: none;
      opacity: 80%;
      color: var(--snow);
    }
    
    & img {
      width: 1.75rem;
      @media screen and (min-width: 768px) {
        width: 2.5rem;
      }
    }
    
    &.sns-banner--insta {
      background-image: var(--grad-instagram);
      
      @media screen and (min-width: 1024px) {
        font-size: 2rem;
        
        & img {
          width: 3rem;
        }
      }
    }
    &.sns-banner--youtube {
      background-color: var(--snow);
      color: var(--youtube-black);
      &:hover {
        color: var(--youtube-black);
      }
    }
    &.sns-banner--line {
      background-color: var(--line-green);
    }
    &.sns-banner--x {
      background-color: var(--x-black);
    }
    &.sns-banner--facebook {
      background-color: var(--facebook-blue);
    }
  }
  
  @media screen and (min-width: 1024px) {
    .shop-map iframe {
      height: 100%;
    }
  }
  
  .staff-prof-group {
    display: flex;
    overflow: auto;
    margin-right: -1.25rem;
    margin-left: -1.25rem;
    padding-right: 1.125rem;
    padding-left: 1.125rem;
    gap: 3rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 1.125rem;
    @media screen and (min-width: 768px) {
      display: grid;
      gap: 3.75rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media screen and (min-width: 1024px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    & .staff-prof:nth-child(even) {
      @media screen and (min-width: 768px) {
        padding-top: 3.75rem;
      }
    }
    
    & .staff-prof {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      min-width: 65%;
      scroll-snap-align: start;
      
      & .staff-prof__header {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        
        & .staff-prof__name-box {
          line-height: 1.25;
          font-weight: 700;
          color: var(--yellow-2);
          text-align: center;
          
          & .staff-prof__name {
            font-size: 1.125rem;
          }
          & .staff-prof__kana {
            font-size: 0.75rem;
          }
        }
        
        & .staff-prof__location {
          color: var(--snow);
          font-weight: 500;
          font-size: 0.875rem;
        }
      }
      
      & .staff-prof__image {
        object-fit: cover;
        aspect-ratio: 1 / 1;
        border-radius: 9999px;
      }
      
      & .staff-prof__comment {
        color: var(--blue);
        font-weight: 500;
        font-size: 0.75rem;
        background-color: var(--snow);
        border-radius: 1rem;
        padding: 1rem;
        position: relative;
        z-index: 1;
        
        &::before {
          content: "";
          display: block;
          height: 3rem;
          width: 3rem;
          background-color: var(--snow);
          transform: rotate(45deg);
          position: absolute;
          top: -4px;
          left: 16px;
          z-index: -1;
        }
      }
    }
  }
  
  .slide-gallery, .shop-gallery, .shop-gallery--reverse {
    &.swiper:not(.swiper-initialized) {
      & .swiper-slide {
        min-width: 240px;
        width: 240px;
      }
    }
  }
  
  .okinawa-concept-subtle {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--yellow-2);
    transform: rotate(-6deg);
    white-space: nowrap;
    position: absolute;
    top: -2rem;
    left: -0.75rem;
    
    @media screen and (min-width: 768px) {
      font-size: 3rem;
      top: -4rem;
      left: -2rem;
    }
    @media screen and (min-width: 1024px) {
      top: -2rem;
      left: -6rem;
    }
  }
  
  .c-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5rem;
    
    & .c-table__head, & .c-table__body {
      display: table-row-group;
    }
    
    & .c-table__row {
      display: table-row;
    }
    & .c-table__heading, & .c-table__cell {
      display: table-cell;
      border-radius: 0.5rem;
      padding: 0.5rem;
      font-size: 0.75rem;
      
      @media screen and (min-width: 768px) {
        border-radius: 0.75rem;
        padding: 1rem;
        font-size: 1rem;
      }
    }
    
    & .c-table__heading {
      background-color: var(--blue);
      color: var(--snow);
    }
    & .c-table__cell {
      background-color: var(--snow);
    }
  }
  
  .license-intro {
    min-height: calc(var(--vh, 1vh) * 100);
    padding: 10rem 1.25rem;
    position: relative;
      
    &::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: 90px;
      background-image: url("/system_panel/uploads/images/lincense-intro-wave-top.png");
      z-index: 1;
    }
    &::after {
      z-index: 1;
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 90px;
      background-image: url("/system_panel/uploads/images/lincense-intro-wave-bottom.png");
    }
    
    & .license-intro__movie {
      position: absolute;
      inset: 0;
      
      & video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("/system_panel/uploads/images/dot-filter.png");
        background-repeat: repeat;
        background-size: 3px 3px;
        pointer-events: none;
      }
    }
  }
  
  .title-shadow {
    text-shadow: var(--title-shadow);
  }
  
  .underlined-text {
    position: relative;
    padding-bottom: 2px;
    z-index: 0;
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 4px;
      background-image: url("/system_panel/uploads/images/underlined-underline.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      bottom: 0;
      left: 0;
    }
    &.underlined-text--blue::after {
      background-image: url("/system_panel/uploads/images/underlined-underline--blue.png");
    }
  }
  
  .license-features {
    overflow: visible;
    &:not(.swiper-initialized) {
      & .swiper-wrapper .swiper-slide {
        min-width: 320px;
        width: 320px;
      }
    }
  }
  
  
  .step-item {
    position: relative;
    padding-top: 2.5rem;
    & .numbered-item {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  
  
  .course-menu.hot {
    & .dialog__box {
      position: relative;
      &::before {
        content: "Hot";
        position: absolute;
        font-family: var(--font-display);
        font-size: 2rem;
        top: -1.5rem;
        left: -1.5rem;
        transform: rotate(-15deg);
        color: var(--red);
        pointer-events: none;
        z-index: 1;
      }
    }
  }

  .instagram-group{
        display: grid;
        gap:3.75rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
 }
    
  .instagram-link261019 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 65%;
    scroll-snap-align: start;
}

.instagram-card {
    border-radius: 2rem;
    overflow: hidden;
}

.instagram-text{
    padding: 16px;
}
  
.instagram-thumbnai{
    overflow: hidden;
}

.instagram-link261019 img{
    transition: transform 300ms linear;
}

.instagram-link261019:hover img{
    transform:scale(1.1);
}

.instagram-title{
    line-height: 1.25;
    font-size: 1.125rem;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media screen and (max-width:768px) {
        .instagram-group{
        display: flex;
        overflow:auto;
        gap:1.75rem;
 }
}