/* --- イントロエリア --- */
    #intro {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #f7f5f0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 1.5s ease, visibility 1.5s ease;
    }

    /* 背景写真エリア */
    .intro-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../images/intro-bg-ill.jpg');
      background-size: cover;
      background-position: center;

      --mask-size: 0%;
      -webkit-mask-image: radial-gradient(circle at center, #000 var(--mask-size), transparent calc(var(--mask-size) + 15%));
      mask-image: radial-gradient(circle at center, #000 var(--mask-size), transparent calc(var(--mask-size) + 15%));
      
      opacity: 0;
      transition: --mask-size 2.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 2s ease;
    }

    /* 背景が広がる状態 */
    .intro-bg.expand {
      --mask-size: 120%;
      opacity: 1;
    }

/* 縦書きキャッチコピーエリア */
    .catch-container {
      position: relative;
      z-index: 2;
      writing-mode: vertical-rl;
      text-orientation: upright;
      color: #7C7C7C; /* 初期状態はダークグレー */
      font-size: 2.0rem; /* 3行化に合わせて少しだけコンパクトに調整 */
      letter-spacing: 0.1em;
      line-height: 2.0;
      height: 14em; /* 最長行に合わせて縦幅を拡張 */
      
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
      transition: color 2.0s ease, text-shadow 2.0s ease;
    }

/* アニメーション定義 */
@keyframes charFadeIn {
  0% {
    opacity: 0;
    transform: translateY(5px); /* 少し下から浮き上がる演出（不要なら削除可） */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 各文字に適用するスタイル */
.char {
  display: inline-block;
  opacity: 0; /* 最初は非表示 */
  animation: charFadeIn 0.8s ease-out forwards; /* 0.8秒かけて滑らかに表示 */
}



/* 縦中横（たてちゅうよこ）の設定 */
    .tcy {
      -webkit-text-combine: horizontal;
      text-combine-upright: all;
      letter-spacing: 0; /* 数字同士の間隔を詰めて綺麗に見せる */
      display: inline-block;
    }

    /* 背景が表示された時の文字色（白） */
    .catch-container.is-white {
      color: #ffffff;
      text-shadow: 0 0 10px rgba(254, 82, 123, 1);
    }

    /* イントロ終了後に非表示 */
    .is-hidden {
      opacity: 0;
      visibility: hidden;
    }

    /* --- 本編メインコンテンツ --- */
    .main-content {

    }