/* =====================================
   TOP｜水泡＋TRY NEW THINGS 波打ち（安定CSS）
===================================== */

/* tn-section をキャンバス土台にする */
.tn-section{
  position: relative;
  overflow: hidden;
}

/* canvasを背面に敷く */
#waterCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

/* タイトルは前面 */
.tn-main{
  position:relative;
  z-index:1;

  /* 1行固定 */
  white-space: nowrap;
  display:inline-block;
}

/* 1文字ずつ波打ち */
.tnt-wave-char{
  display:inline-block;
  animation: tntWave 2.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes tntWave{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0px); }
}

/* サブも前面に */
.tn-sub{
  position:relative;
  z-index:1;
}
