@charset "UTF-8";
/* CSS Document */



    /* =============================================
       グレインレイヤー
       任意の要素に .grain-wrapper を付けて使う。
       position: relative が必要。
       ============================================= */
/*
    .grain-wrapper {
      position: relative;
      overflow: hidden;
    }
*/

    .grain-layer {
      position: absolute;
/*		position: fixed;*/
		top: 0;
		left: 0;
      inset: 0;
      pointer-events: none;
      z-index: 1;
		z-index: 1;
      opacity: 0.6;         /* ← 強度はここで調整 (0.1〜0.6 推奨) */
      animation: grain 0.8s steps(1) infinite; /* ← 速度はここで調整 */
		
		width: 100%;
		height: 10000%;
		height: 100%;
    }

    .grain-layer::before {
      content: '';
      position: absolute;
      inset: -100%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    /*
      baseFrequency の値でノイズの粗さが変わる:
        0.5 = 粗め（大きな粒）
        0.9 = 標準（フィルム粒子）
        1.5 = 細かめ（砂のような質感）
    */

    @keyframes grain {
      0%   { transform: translate(0, 0); }
      10%  { transform: translate(-2%, -3%); }
      20%  { transform: translate(3%, 1%); }
      30%  { transform: translate(-1%, 4%); }
      40%  { transform: translate(4%, -2%); }
      50%  { transform: translate(-3%, 2%); }
      60%  { transform: translate(2%, -4%); }
      70%  { transform: translate(-4%, 1%); }
      80%  { transform: translate(1%, 3%); }
      90%  { transform: translate(3%, -1%); }
      100% { transform: translate(-2%, 2%); }
    }

    /* =============================================
       デモ用スタイル（実装時は不要）
       ============================================= */
    .demo {
      min-height: 100vh;
      background: #0d0d0d;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content {
      position: relative;
      z-index: 2;
      color: #fff;
      text-align: center;
      letter-spacing: 0.15em;
    }

    .content h1 {
      font-size: 48px;
      font-weight: 400;
      margin: 0 0 12px;
    }

    .content p {
      font-size: 14px;
      color: #888;
      letter-spacing: 0.2em;
    }

    /* =============================================
       コントロールパネル（デモ用）
       ============================================= */
    .controls {
      position: fixed;
		top: 3%;
/*      bottom: 24px;*/
      left: 1%;
      transform: translateX(-50%);
      background: rgba(20, 20, 20, 0.9);
      border: 1px solid #333;
      border-radius: 12px;
      padding: 14px 20px;
      display: flex;
      gap: 24px;
      align-items: center;
      backdrop-filter: blur(8px);
      z-index: 100;
      flex-wrap: wrap;
      justify-content: center;
		transform: rotate(90deg);
    }

    .ctrl-group {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #888;
    }

    .ctrl-group span {
      min-width: 32px;
      color: #ccc;
      font-size: 11px;
    }

    input[type=range] {
      width: 80px;
      accent-color: #888;
    }

    select {
      background: #222;
      color: #ccc;
      border: 1px solid #444;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 12px;
    }