@charset "utf-8";
@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-mincho);
    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;
    }
  }



   /* --- ページネーション --- */
   .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 80px;
    margin-bottom: 50px;
    font-family: var(--font-family-oswald);
    font-weight: var(--font-weight-normal);
  }

  /* 1ページのみの場合は最初から非表示（FOUC防止） */
  .pagination[data-total="1"] {
    display: none !important;
  }

  .page-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    color:var(--color-text);
    font-size: 1.6rem;
    transition: background-color 0.3s, color 0.3s;

  }

  .page-num.current {
    background-color:var(--color-navy);
    color: #fff;
    cursor: default;
  }

  .page-num:not(.current):hover {
    background-color: var(--color-mgray);
  }

  .page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-navy);
    text-decoration: none;
    transition: background-color 0.3s;
  }

  .page-nav:hover:not(.disabled) {
    background-color: var(--color-mgray);
  }

  .page-nav.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  .page-dots {
    color: var(--color-mgray);
    letter-spacing: 2px;
  }

  /* スマホでのページネーション調整 */
  @media (max-width: 600px) {
    .pagination {
      margin-top: 40px;
      gap: 4px;
    }

    .page-num,
    .page-nav {
      width: 35px;
      height: 35px;
      font-size: 1.2rem;
    }
  }
  
}