html.bl-anim .denki-online-lp #contents :is(
	.worry-list-item, .do-lab, .do-ch-group, .do-choose-col, .do-price-card, .do-discount, .do-need-case, .do-route-item
):not(.is-in){
	filter:grayscale(1) opacity(.72);
}

html.bl-anim .denki-online-lp #contents .bl-a{
	transition:filter .35s cubic-bezier(.2,.7,.2,1) calc(var(--bl-d, 0ms) + 450ms);
}

html.bl-anim .denki-online-lp #contents .bl-af:not(.bl-af-done){ border-color:transparent; }

html.bl-anim .denki-online-lp #contents .bl-quiet,
html.bl-anim .denki-online-lp #contents .bl-quiet::before{ transition:none !important; }

html.bl-anim .denki-online-lp #contents .about-wrap > .img{
	clip-path:inset(0 100% 0 0);
	transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) var(--bl-d, 0ms);
}
html.bl-anim .denki-online-lp #contents .about-wrap > .img::before{
	content:"";
	position:absolute;
	inset:0;
	background:inherit;
	transform:scale(1.08);
	transition:transform 1.6s cubic-bezier(.2,.7,.2,1) var(--bl-d, 0ms);
}
html.bl-anim .denki-online-lp #contents .about-wrap > .img.is-in{ clip-path:inset(0 0 0 0); }
html.bl-anim .denki-online-lp #contents .about-wrap > .img.is-in::before{ transform:none; }

html.bl-anim .denki-online-lp #contents .do-movie-item{
	opacity:0;
	transform:translateY(20px);
	transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
	transition-delay:var(--bl-d, 0ms);
}
html.bl-anim .denki-online-lp #contents .do-movie-item.is-in,
html.bl-anim .denki-online-lp #contents .do-movie-item:focus-within{ opacity:1; transform:none; }

.bl-layer{                              
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	width:100%;
	height:0;
	overflow-x:clip;
	overflow-y:visible;
	pointer-events:none;
	text-align:left;
}

html.bl-trunk-on .denki-online-lp #contents .about-wrap > .img{ z-index:11; }

.bl-frame{
	position:absolute;
	left:0;
	top:0;
	overflow:visible;
}
.bl-frame path{ fill:none; }
.bl-frame-off{
	stroke:#B4C0CB;
	stroke-width:1.5;
	stroke-dasharray:6 5;
}
.bl-frame-on{
	stroke:var(--do-live, #1283CF);
	stroke-width:2;
	stroke-dasharray:100 100;
	stroke-dashoffset:100;
}
.bl-frame.is-in .bl-frame-on{
	stroke-dashoffset:0;
	transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1) var(--bl-d, 0ms);
}
.bl-frame.is-done .bl-frame-off{ opacity:0; }
.bl-frame.is-done .bl-frame-on{ opacity:0; transition:opacity .45s ease; }

.bl-band{
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	background:#C5CFD8;
}
.bl-band-fill{
	position:absolute;
	inset:0;
	transform:scaleX(0);
	transform-origin:left center;
}
.bl-band.is-in .bl-band-fill{
	transform:none;
	transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--bl-d, 0ms);
}
.bl-band.is-done{ opacity:0; transition:opacity .45s ease; }

.bl-trunk{
	display:none;
	position:absolute;
	left:0;
	top:0;
	width:32px;
	height:0;
}
html.bl-trunk-on .bl-trunk{ display:block; }
.bl-trunk-wire{
	position:absolute;
	left:15px;
	top:0;
	bottom:0;
	width:2px;
	background:repeating-linear-gradient(to bottom, #C5D0DA 0 6px, transparent 6px 12px);
}
.bl-trunk-clip{                         
	position:absolute;
	left:14px;
	top:0;
	bottom:0;
	width:4px;
	overflow:hidden;
}
.bl-trunk-live{                         
	position:absolute;
	left:0;
	top:0;
	width:4px;
	height:100%;
	background:linear-gradient(to right, rgba(255,255,255,.9) 0 1px, var(--do-live, #1283CF) 1px 3px, rgba(255,255,255,.9) 3px);
	transform:translateY(-100%);
}
.bl-trunk-live::after{                  
	content:"";
	position:absolute;
	left:1px;
	width:2px;
	top:-18px;
	bottom:0;
	background:repeating-linear-gradient(to bottom, var(--do-flow, #8FDBFF) 0 4px, transparent 4px 18px);
	animation:bl-flow .9s linear infinite;
}
@keyframes bl-flow{ to{ transform:translateY(18px); } }

.bl-trunk-front{
	position:absolute;
	left:16px;
	top:0;
	width:0;
	height:0;
}
.bl-trunk-dot{
	position:absolute;
	left:-6px;
	top:-6px;
	width:12px;
	height:12px;
	border-radius:50%;
	background:var(--do-live, #1283CF);
	box-shadow:0 0 0 3px #fff;
}
.bl-trunk-dot::after{
	content:"";
	position:absolute;
	inset:-5px;
	border:1.5px solid var(--do-brand, #1DA1F2);
	border-radius:50%;
	animation:bl-ring 1.8s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes bl-ring{
	0%{ transform:scale(.6); opacity:.8; }
	100%{ transform:scale(1.7); opacity:0; }
}
html.bl-reached .bl-trunk-dot{ opacity:0; }

.bl-term{
	position:absolute;
	left:16px;
	top:0;
	width:0;
	height:0;
}
.bl-term::before,
.bl-term::after{
	content:"";
	position:absolute;
	left:-6px;
	top:-6px;
	width:12px;
	height:12px;
	box-sizing:border-box;
	border-radius:50%;
}
.bl-term::before{ border:2px solid #C5D0DA; background:#fff; }
.bl-term::after{
	background:var(--do-live, #1283CF);
	box-shadow:0 0 0 4px rgba(29,161,242,.18);
	opacity:0;
	transform:scale(.4);
	transition:opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.bl-term.is-live::after{ opacity:1; transform:none; }

.bl-load{
	position:absolute;
	left:2px;
	bottom:-14px;
	width:28px;
	height:28px;
}
.bl-load svg{ display:block; overflow:visible; }
.bl-load-off .bl-load-bld{ fill:#fff; stroke:#AEBBC7; stroke-width:2; stroke-linejoin:round; }
.bl-load-off .bl-load-win{ fill:#D5DEE6; }
.bl-load-on .bl-load-bld{ fill:#fff; stroke:var(--do-live, #1283CF); stroke-width:2; stroke-linejoin:round; }
.bl-load-on .bl-load-win{ fill:#FFE14D; }
.bl-load-on{ opacity:0; transition:opacity .5s ease; }
html.bl-reached .bl-load-on{ opacity:1; }

.bl-tap{
	position:absolute;
	height:2px;
	margin-top:-1px;
	background:var(--do-live, #1283CF);
	transform:scaleX(0);
	transform-origin:left center;
	animation:bl-tap .9s linear both;
}
@keyframes bl-tap{
	0%{ transform:scaleX(0); opacity:1; animation-timing-function:cubic-bezier(.2,.7,.2,1); }
	18%{ transform:scaleX(1); opacity:1; }
	55%{ transform:scaleX(1); opacity:1; }
	100%{ transform:scaleX(1); opacity:0; }
}

.bl-lamp{
	position:absolute;
	left:0;
	top:0;
	width:0;
	height:0;
}
.bl-lamp::before,
.bl-lamp::after{
	content:"";
	position:absolute;
	left:-4.5px;
	top:-4.5px;
	width:9px;
	height:9px;
	box-sizing:border-box;
	border-radius:50%;
}
.bl-lamp::before{ border:1.5px solid #B5C1CC; background:#fff; }
.bl-lamp::after{
	background:var(--do-brand, #1DA1F2);
	box-shadow:0 0 0 3px rgba(29,161,242,.2);
	opacity:0;
	transform:scale(.4);
	transition:opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
	transition-delay:var(--bl-d, 0ms);
}
.bl-lamp.is-in::after{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
	.bl-layer *,
	.bl-layer *::before,
	.bl-layer *::after{
		animation:none !important;
		transition:none !important;
	}
	.bl-trunk-live::after,
	.bl-tap,
	.bl-frame,
	.bl-band{ display:none; }
}

@media (min-width:1100px){
	.denki-online-lp .do-curriculum .wrap{
		display:grid;
		grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);
		column-gap:clamp(40px, 5vw, 80px);
		align-items:start;
	}
	.denki-online-lp .bl-cur-side{
		position:sticky;
		top:40px;
	}
	.denki-online-lp .bl-cur-side .ttl-01{
		margin-bottom:28px;
		text-align:left;
	}
	.denki-online-lp .bl-cur-side .do-curriculum-total{
		justify-content:flex-start;
		margin:0 0 20px;
	}
	.denki-online-lp .bl-cur-side .do-curriculum-note{
		margin:0;
		text-align:left;
		word-break:auto-phrase;          
	}
	.denki-online-lp .bl-cur-side .do-curriculum-note strong{ white-space:nowrap; }
}

@media (min-width:1100px) and (max-width:1200px){
	.denki-online-lp .bl-cur-side{ top:122px; }
}