/* =============================================================================
   Component: Shape Drip — 滴る形のCSS mask装飾
   ==========================================================================

   仕組み:
   - <div> の background-color を mask-image (雫SVG) で型抜きする
   - mask-repeat: repeat-x で横方向にタイル → 画面幅に依存せず一定サイズで繰り返す
   - 1タイルの幅 (mask-size) は 600px 固定
   ========================================================================== */

.tt-shape-drip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: clamp(60px, 10vw, 160px);
	line-height: 0;
	pointer-events: none;
	z-index: 1;
	transform: translateY(99%);

	background-color: var(--tt-bg);

	-webkit-mask-image: url("../../img/shape-drip.svg");
	mask-image: url("../../img/shape-drip.svg");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: left bottom;
	mask-position: left bottom;
	-webkit-mask-size: 600px 100%;
	mask-size: 600px 100%;
}