/*****************************************************/
/* --- アニメーションの共通設定 --- */
/*****************************************************/
.container {
	width: 90%;
	margin: 0 auto;
	padding: 0em;
	max-width: 1000px;
	background: #fff;
	border: 0px solid #1C97C3;
}

svg {
	width: 100%;
	height: auto;
/*	margin-top: -30px; /* ここで上部の空きスペースを削る */
	overflow: visible;
}


/* すべての線画要素に同じアニメーションを適用（ delay は使わない ） */
.draw-path {
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: draw 25s linear infinite;
}

/* 塗り要素 */
.fade-fill {
	opacity: 0;
	animation: fadeIn 25s linear infinite;
}


/*****************************************************/
/* --- アニメーション遅延（delay）の無効化 --- */
/* ※ここが残っていると順番に消えてしまう原因になります */
/*****************************************************/
.step-1, .step-2, .step-3, .step-4, .step-fill {
	animation-delay: 0s !important;
}


/*****************************************************/
/* --- Keyframes (同時に消えて白紙に戻るループ) --- */
/*****************************************************/

/* 線画アニメーション */
@keyframes draw {
	0% {
		stroke-dashoffset: 2000; /* 白紙（描画開始） */
	}
	65% {
		stroke-dashoffset: 0;    /* すべての線を描き終わる */
	}
	88% {
		stroke-dashoffset: 0;    /* 完成状態をキープ（余韻） */
	}
	90%, 100% {
		stroke-dashoffset: 2000; /* 90%の時点で一瞬で完全白紙に戻る */
	}
}

/* 塗りアニメーション */
@keyframes fadeIn {
	0%, 50% {
		opacity: 0;              /* 線を描いている前半は透明 */
	}
	70% {
		opacity: 1;              /* じわっと色が塗られる */
	}
	88% {
		opacity: 1;              /* 完成状態をキープ */
	}
	90%, 100% {
		opacity: 0;              /* 90%の時点で一瞬で完全に消える（白紙） */
	}
}

/*****************************************************/
/* --- 歯車専用のKeyframes --- */
/*****************************************************/
@keyframes draw-gear1 {
	0% {
		stroke-dashoffset: 120; /* 完全に隠す */
	}
	65%, 88% {
		stroke-dashoffset: 0;   /* 描画完成 */
	}
	90%, 100% {
		stroke-dashoffset: 120; /* パッと消えて白紙リセット */
	}
}

@keyframes draw-gear2 {
	0% {
		stroke-dashoffset: 100;
	}
	65%, 88% {
		stroke-dashoffset: 0;
	}
	90%, 100% {
		stroke-dashoffset: 120;
	}
}


/*****************************************************/
/* --- 歯車専用のKeyframes --- */
/*****************************************************　　　　　/
@keyframes draw-gear1 {
	0% {
		stroke-dashoffset: 120; /* 完全に隠す *　　　　　/
	}
	65%, 88% {
		stroke-dashoffset: 0;   /* 描画完成 *　　　　　/
	}
	90%, 100% {
		stroke-dashoffset: 120; /* パッと消えて白紙リセット *　　　　/
	}
}

@keyframes draw-gear2 {
	0% {
		stroke-dashoffset: 100;
	}
	65%, 88% {
		stroke-dashoffset: 0;
	}
	90%, 100% {
		stroke-dashoffset: 120;
	}
}



/*****************************************************/
/* --- アニメーションの共通設定 --- */
/*****************************************************/
.draw-path path,
.draw-path line,
.draw-path polygon,
.draw-path rect,
.draw-path circle {
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: draw 25s linear infinite;
}

/* 歯車の破線（点線）模様とアニメーションの設定 */
.draw-path circle.gear-1 {
	stroke-dasharray: 5 5;/* 点線模様とアニメーション用の大きなダッシュ値を設定 */
	animation: draw-gear1 25s linear infinite;/* 円周にあわせたアニメーション設定 */
}

.draw-path circle.gear-2 {
	stroke-dasharray: 4 4;
	animation: draw-gear2 25s linear infinite;
}


/*****************************************************/
/* 幅100%・高さ10px のベース線 */
/*****************************************************/
.laser-line-container {
    width: 100%;
    height: 10px;
    position: relative;
    /* ネオン風グロー効果 */
    filter: drop-shadow(0 0 0px #00BFFF);
}

.laser-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 5px;
}