/* --- Reset & Base --- */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Montserrat", "Noto Sans JP", sans-serif;
        background-color: #111;
        color: #fff;
        overflow-x: hidden;
        /* ローディング中はスクロールさせない */
        overflow-y: hidden;
      }

      /* --- Loader Styles --- */
      .loader-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
      }

      .mask-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .mask-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      /* 配色設定 */
      .layer-1 {
        background-color: #1a1a1a;
        z-index: 30;
        display: flex;
        justify-content: center;
        align-items: center;
        clip-path: circle(150% at 50% 50%);
      }

      .layer-2 {
        background-color: #ff0080; /* ポップに変更：ビビッドピンク */
        z-index: 20;
        clip-path: circle(150% at 50% 50%);
      }

      .layer-3 {
        background-color: #ffd700; /* ポップに変更：イエロー */
        z-index: 10;
        clip-path: circle(150% at 50% 50%);
      }

      .mask-text-box {
        /* overflow: hidden; を削除して見切れを防止 */
        overflow: visible;
        position: relative; /* 必要に応じてz-index等の制御用 */
      }

      .mask-content {
        display: inline-block;
        font-size: 3rem;
        font-weight: 900;
        color: #fff;
        opacity: 0;
        transform: scale(0.8);
        letter-spacing: 0.1em;
        /* 改行されないように念のため指定 */
        white-space: nowrap;
      }

      /* --- First View (FV) Styles --- */
      .fv-section {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-color: #0f0f0f;
      }

      /* 背景画像とオーバーレイ */
      .fv-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      .fv-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* ポップな画像なので明るすぎないように少し落とす */
        opacity: 0.6;
        transform: scale(1.1);
      }

      /* 背景が賑やかなので、文字が見えるように少し黒を重ねる */
      .fv-bg::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
      }

      .fv-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 20px;
        width: 100%;
      }

      /* タイポグラフィ */
      .fv-subtitle {
        display: inline-block;
        font-size: 1.2rem;
        letter-spacing: 0.3em;
        color: #fff;
        background-color: #000; /* ポップなステッカー風 */
        padding: 5px 15px;
        margin-bottom: 20px;
        font-weight: 700;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.5); /* 影をつけてポップに */
      }

      .fv-title {
        /* 1行にするためサイズ調整 */
        font-size: clamp(2.5rem, 8vw, 6rem);
        font-weight: 900;
        line-height: 1;
        margin-bottom: 30px;
        letter-spacing: 0.05em;
        color: #fff;
        /* 文字の視認性を高めるドロップシャドウ */
        text-shadow: 4px 4px 0px #000;
        white-space: nowrap; /* 折り返し禁止 */
      }

      .fv-title span {
        display: inline-block; /* 横並びにするために変更 */
        clip-path: inset(
          0 0 0 0
        ); /* マスクアニメーションではなくスケールと移動で表現するためリセット */
        transform: translateY(100px) scale(0.5); /* 初期位置：下から＆小さく */
        opacity: 0;
        margin: 0 10px; /* 文字間隔 */
      }

      /* View More ボタン */
      .fv-btn-wrapper {
        margin-top: 20px;
        opacity: 0;
        transform: scale(0); /* ポップに出現させるためスケール0から */
      }

      .view-more-btn {
        position: relative;
        display: inline-block;
        padding: 15px 50px;
        background-color: #fff;
        color: #000;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        border: 2px solid #000;
        box-shadow: 4px 4px 0px #000; /* ハードなシャドウ */
        transition: all 0.2s ease;
      }

      .view-more-btn:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px #000;
      }

      .view-more-btn:active {
        transform: translate(4px, 4px);
        box-shadow: 0px 0px 0px #000;
      }

      /* 装飾的な要素（ポップなシェイプ） */
      .deco-circle {
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        opacity: 0; /* JSで表示 */
      }
      .dc-1 {
        width: 100px;
        height: 100px;
        background: #ff0080;
        top: 20%;
        left: 10%;
      }
      .dc-2 {
        width: 60px;
        height: 60px;
        background: #00bfff;
        bottom: 20%;
        right: 15%;
      }
      .dc-3 {
        width: 40px;
        height: 40px;
        background: #ffd700;
        top: 30%;
        right: 25%;
      }