@layer utilities {
  .u-showsp {
    display: none;
  }

  @media screen and (max-width: 480px) {
    .u-hidesp {
      display: none;
    }

    .u-showsp {
      display: block;
    }
  }

  /* GSAPアニメーション初期状態 */
  .js-fadein {
    overflow: hidden;
  }
  .js-fadein .char {
    transform: translateY(50px);
    transition: transfrom 0.5s;
  }

  /* テキスト */
  .u-txtcenter {
    text-align: center;
  }

  /* セクション見出し（旧 @layer components から統合） */
  .c-sectionttl {
    font-family: var(--font-family-zenold);
    font-size: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 2em;
    position: relative;

    &::after {
      content: "";
      display: inline-block;
      width: 2em;
      border-bottom: 2px solid var(--color-main);
      position: absolute;
      left: 50%;
      bottom: 35%;
      transform: translateX(-50%);
    }
  }

  .c-sectionttl__en {
    font-size: clamp(3.2rem, 4.5vw, 4rem);
  }
  @media screen and (max-width: 480px) {
    .c-sectionttl {
      font-size: 1.6rem;
    }
  }
}
