/* Lower section of web-production.html (mock 1887px wide; 1 unit = 1 mock px) */
.tl{--u:calc(100cqw/1887);--serif:"Noto Serif JP","Noto Serif CJK JP","Yu Mincho","Hiragino Mincho ProN",serif;--sans:"Noto Sans JP","Noto Sans CJK JP","Hiragino Sans","Yu Gothic",sans-serif;--gold:#d9a85f;--gl:#f2d39a;--cy:#5fd8e6;container-type:inline-size;position:relative;color:#f6ead6;font-family:var(--sans);
 background:radial-gradient(60% 30% at 50% 8%,#3a2619 0,transparent 70%),radial-gradient(70% 25% at 50% 55%,#36241a 0,transparent 70%),linear-gradient(#2e1d14,#2b1b12 60%,#291910);}
.tl *{box-sizing:border-box}.tl a{color:inherit;text-decoration:none}
.tl-in{position:relative}
.tl-h{display:flex;align-items:center;justify-content:center;gap:calc(22*var(--u));height:calc(170*var(--u));margin:0;font:400 calc(50*var(--u))/1 var(--serif);letter-spacing:.06em;color:#f3e4c9;text-shadow:0 0 calc(12*var(--u)) #0008}
.tl-h::before,.tl-h::after{content:"";width:calc(250*var(--u));height:1px;background:linear-gradient(90deg,var(--gold),#b78a4b);box-shadow:0 0 4px #d9a85f66}
.tl-h::before{background:radial-gradient(circle,var(--gold) 3px,transparent 4px) left center/12px 12px no-repeat,linear-gradient(90deg,var(--gold),var(--gold)) center/100% 1px no-repeat;height:12px;box-shadow:none}
.tl-h::after{background:radial-gradient(circle,var(--gold) 3px,transparent 4px) right center/12px 12px no-repeat,linear-gradient(90deg,var(--gold),var(--gold)) center/100% 1px no-repeat;height:12px;box-shadow:none}
/* photo cards */
.tl-photos{display:grid;grid-template-columns:593fr 568fr 594fr;gap:calc(25*var(--u));margin:calc(-17*var(--u)) calc(39*var(--u)) 0 calc(42*var(--u))}
.tl-pc{position:relative;display:block;height:calc(592*var(--u));border:2px solid #c99a5a;border-radius:calc(12*var(--u));overflow:hidden;background:#2a1a10;box-shadow:0 0 calc(10*var(--u)) #e0a85a40,inset 0 0 0 1px #00000055}
.tl-pc img{position:absolute;left:0;top:0;width:100%;height:calc(484*var(--u));object-fit:cover}
.tl-pc.c1 img{object-position:50% 0}
.tl-cap{position:absolute;left:calc(3*var(--u));right:calc(3*var(--u));bottom:calc(3*var(--u));height:calc(104*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(28*var(--u)) 0 calc(40*var(--u));border:1px solid #d6a96299;border-radius:calc(8*var(--u));background:linear-gradient(180deg,#3a2515f0,#2a190ef2);font:400 calc(33*var(--u))/1.36 var(--serif);color:#fbf0dc;letter-spacing:.03em}
.tl-arw{flex:none;display:grid;place-items:center;width:calc(76*var(--u));height:calc(76*var(--u));border:2px solid #e3b878;border-radius:50%;background:#1d120bcc;box-shadow:0 0 calc(8*var(--u)) #e8b87066;color:#f8e9cf}
.tl-arw svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* deco lines */
.tl-deco{position:relative;height:calc(184*var(--u))}
.tl-deco i{position:absolute;top:calc(110*var(--u));height:12px;width:calc(170*var(--u));background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,radial-gradient(circle,var(--gold) 3px,transparent 4px) var(--p) center/12px 12px no-repeat}
.tl-deco i:first-child{left:calc(352*var(--u));--p:left}.tl-deco i:last-child{left:calc(1338*var(--u));--p:right}
/* service cards */
.tl-svc{display:grid;grid-template-columns:593fr 568fr 594fr;gap:calc(25*var(--u));margin:0 calc(41*var(--u)) 0 calc(43*var(--u))}
.tl-sc{position:relative;display:block;height:calc(429*var(--u));padding:calc(94*var(--u)) calc(40*var(--u)) 0 calc(57*var(--u))}
.tl-fr{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tl-fr .o{fill:#2a1b12e6;stroke:#c8965a;stroke-width:2}.tl-fr .i{fill:none;stroke:#b98a50aa;stroke-width:1}.tl-fr .c{fill:none;stroke:var(--cy);stroke-width:3;filter:drop-shadow(0 0 3px #5fd8e6aa)}.tl-fr .d{fill:var(--cy)}.tl-fr .g{fill:none;stroke:var(--gold);stroke-width:2}
.tl-fr *{vector-effect:non-scaling-stroke}
.tl-sc>*{position:relative}
.tl-ico{position:absolute!important;left:calc(57*var(--u));top:calc(94*var(--u));width:calc(135*var(--u));height:calc(86*var(--u));fill:none;stroke:#f1d29c;stroke-width:2;filter:drop-shadow(0 0 3px #e6b06a88)}
.tl-ico .cy{stroke:var(--cy)}
.tl-sc h3{position:absolute!important;left:calc(232*var(--u));top:calc(80*var(--u));height:calc(90*var(--u));display:flex;align-items:center;margin:0;font:700 calc(38*var(--u))/1.35 var(--sans);letter-spacing:.04em;color:#fff6e6}
.tl-sc .tl-arw{position:absolute!important;left:calc(489*var(--u));top:calc(138*var(--u))}
.tl-sc p{position:absolute!important;left:calc(57*var(--u));top:calc(218*var(--u));margin:0;font:400 calc(28*var(--u))/1.6 var(--sans);color:#f1e5d2}
.tl-tags{position:absolute!important;left:calc(62*var(--u));top:calc(314*var(--u));display:flex;gap:calc(48*var(--u))}
.tl-tags span{display:grid;place-items:center;height:calc(55*var(--u));padding:0 calc(26*var(--u));border:1.5px solid #c99a5acc;border-radius:calc(9*var(--u));background:#24170f;font:500 calc(24*var(--u))/1 var(--sans);color:#f4e7d3}
.tl-line{display:flex;align-items:center;justify-content:center;gap:calc(40*var(--u));height:calc(122*var(--u));margin:0;font:400 calc(28*var(--u))/1 var(--sans);letter-spacing:.06em;color:#efe3cf}
.tl-line::before,.tl-line::after{content:"";width:calc(160*var(--u));height:1px;background:#c9a37099}
.tl-sep{height:1px;margin:0;border:0;background:linear-gradient(90deg,transparent,#5b3f2a 10%,#5b3f2a 90%,transparent)}
/* flow */
.tl-flow{position:relative;display:block;height:calc(380*var(--u));margin:calc(43*var(--u)) calc(39*var(--u)) 0 calc(40*var(--u))}
.tl-flow h2{position:absolute;left:calc(56*var(--u));top:calc(52*var(--u));margin:0;font:500 calc(46*var(--u))/1.2 var(--serif);letter-spacing:.05em;color:#fbefd9}
.tl-st{position:absolute;top:calc(148*var(--u));display:flex;gap:calc(14*var(--u))}
.tl-n{display:grid;place-items:center;width:calc(90*var(--u));height:calc(90*var(--u));border:2px solid #d6a862;border-radius:50%;background:radial-gradient(#3a2416,#22150d);font:400 calc(38*var(--u))/1 var(--serif);color:#fbefd9;box-shadow:0 0 calc(8*var(--u)) #e0a85a55}
.tl-si{width:calc(72*var(--u));height:calc(72*var(--u));margin-top:calc(8*var(--u));fill:none;stroke:#f1e3cc;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round}
.tl-st h3{margin:calc(14*var(--u)) 0 calc(12*var(--u));font:700 calc(29*var(--u))/1.2 var(--sans);color:#fff6e6}
.tl-st p{margin:0;font:400 calc(21*var(--u))/1.75 var(--sans);color:#e9dcc6}
.tl-chev{position:absolute;top:calc(180*var(--u));width:calc(22*var(--u));height:calc(36*var(--u));fill:none;stroke:#d9c7aa;stroke-width:2}
/* compass CTA */
.tl-cta{position:relative;display:flex;flex-direction:column;align-items:center;height:calc(412*var(--u));margin-top:calc(48*var(--u));padding-top:calc(78*var(--u));border-top:1px solid #6b4a2e;border-bottom:1px solid #6b4a2e;background:url(../assets/images/top/compass.webp?v=1) center/100% 100% no-repeat}
.tl-cta h2{margin:0;font:500 calc(62*var(--u))/1.3 var(--serif);letter-spacing:.06em;color:#fbf0dc;text-shadow:0 0 calc(14*var(--u)) #000a}
.tl-btn{display:flex;align-items:center;justify-content:center;gap:calc(90*var(--u));width:calc(736*var(--u));height:calc(120*var(--u));margin-top:calc(54*var(--u));padding-left:calc(60*var(--u));border:3px solid #f0c27a;border-radius:999px;background:radial-gradient(80% 120% at 50% 0,#6b4423,#3a2414 60%,#2a1a0f);box-shadow:0 0 calc(18*var(--u)) #f3b45f99,inset 0 0 calc(18*var(--u)) #f6c27a55;font:500 calc(34*var(--u))/1 var(--sans);color:#fff3dc!important;letter-spacing:.04em}
.tl-btn svg{width:calc(56*var(--u));height:calc(28*var(--u));fill:none;stroke:currentColor;stroke-width:2.2}
/* footer */
.tl-ft{display:flex;align-items:center;height:calc(231*var(--u));padding:0 calc(71*var(--u)) 0 calc(76*var(--u));background:#24160e}
.tl-brand{font:400 calc(52*var(--u))/1 var(--serif);letter-spacing:.04em;color:#f6ead4}
.tl-ft i{width:1px;height:calc(50*var(--u));margin:0 calc(70*var(--u)) 0 calc(72*var(--u));background:#c9a370aa}
.tl-ft nav{display:flex;gap:calc(64*var(--u));font:400 calc(26*var(--u))/1 var(--sans);color:#eadcc6}
.tl-ft small{margin-left:auto;font:400 calc(23*var(--u))/1 var(--serif);color:#e8dac2}
.tl a:hover .tl-arw,.tl-btn:hover{filter:brightness(1.15)}
.tl a:focus-visible{outline:2px solid #c0f6ff;outline-offset:3px}
/* iPhone */
@media (max-width:700px){
 .tl{--u:.3px}
 .tl-h{height:auto;padding:34px 0 18px;font-size:22px}.tl-h::before,.tl-h::after{width:48px}
 .tl-photos,.tl-svc{grid-template-columns:1fr;gap:14px;margin:0 16px}
 .tl-pc{height:auto;aspect-ratio:593/592;border-radius:10px}.tl-pc img{height:82%}
 .tl-cap{height:18%;padding:0 12px 0 18px;font-size:16px;border-radius:7px}
 .tl-arw{width:38px;height:38px}
 .tl-deco{height:34px}.tl-deco i{display:none}
 .tl-sc{height:auto;min-height:206px;padding:24px 20px 22px}
 .tl-ico{position:static!important;width:60px;height:40px}
 .tl-sc h3{position:absolute!important;left:96px;top:22px;height:44px;font-size:18px}
 .tl-sc .tl-arw{left:auto;right:18px;top:24px}
 .tl-sc p{position:static!important;margin-top:16px;font-size:14px}
 .tl-tags{position:static!important;margin-top:14px;gap:10px;flex-wrap:wrap}.tl-tags span{height:30px;padding:0 14px;font-size:12px;border-radius:6px}
 .tl-line{height:auto;padding:22px 16px;font-size:13px;gap:10px;text-align:center}.tl-line::before,.tl-line::after{width:24px;flex:none}
 .tl-flow{height:auto;margin:22px 16px 0;padding:22px 20px 26px}
 .tl-flow h2{position:static;font-size:21px;margin-bottom:14px}
 .tl-st{position:static;display:grid;grid-template-columns:38px 34px 1fr;gap:10px;align-items:start;margin-top:12px}
 .tl-n{width:38px;height:38px;font-size:16px}.tl-si{width:30px;height:30px;margin-top:4px}
 .tl-st h3{margin:2px 0 4px;font-size:15px}.tl-st p{font-size:12px;line-height:1.6}.tl-st p br{display:none}
 .tl-chev{display:none}
 .tl-cta{height:auto;margin-top:28px;padding:34px 16px 36px;background-size:cover}
 .tl-cta h2{font-size:20px;text-align:center}
 .tl-btn{width:270px;height:54px;margin-top:20px;gap:26px;padding-left:20px;font-size:15px}.tl-btn svg{width:24px;height:14px}
 .tl-ft{flex-wrap:wrap;height:auto;padding:24px 20px;row-gap:14px}
 .tl-brand{font-size:22px}.tl-ft i{display:none}
 .tl-ft nav{order:3;width:100%;flex-wrap:wrap;gap:10px 20px;font-size:13px}
 .tl-ft small{font-size:11px}
}
.tl .tl-fr{position:absolute!important}
.tl-sc h3{white-space:nowrap}
.tl-h{font-weight:500}.tl-cap{font-weight:500}.tl-cta h2{font-weight:600}.tl-brand{font-weight:500}
.tl-btn{background:radial-gradient(90% 140% at 50% 0,#8d5d30,#5a3820 55%,#3a2414);border-width:3px;box-shadow:0 0 calc(24*var(--u)) #f3b45fbb,inset 0 0 calc(22*var(--u)) #f8cc8a77}
.tl-ico{stroke-width:2.6;filter:drop-shadow(0 0 4px #e6b06acc)}
.tl-sc,.tl-flow{isolation:isolate}.tl .tl-fr{z-index:-1}
@media (max-width:700px){
 .tl-line{font-size:12px;letter-spacing:.02em}.tl-line::before,.tl-line::after{display:none}
 .tl-cta h2{font-size:17px;white-space:nowrap;letter-spacing:.03em}
 .tl-flow .tl-fr .c{stroke-width:2}
}
@media (max-width:700px){.tl-line{margin:18px 16px 4px!important;height:auto!important;line-height:1.6}}
.tl-pc.c3 img{object-position:50% 50%}
/* v3: compass-band look across the whole lower section */
.tl{background:radial-gradient(45% 18% at 50% 6%,#4a301b 0,transparent 75%),radial-gradient(55% 16% at 50% 40%,#43291a 0,transparent 75%),radial-gradient(60% 14% at 50% 68%,#452b19 0,transparent 75%),linear-gradient(#30200f,#2d1c12 50%,#2b1a10);isolation:isolate}
.tl::before{content:"";position:absolute;inset:0 0 calc(643*var(--u)) 0;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
 background:url(../assets/images/top/ring-l.webp?v=1) 0 calc(60*var(--u))/calc(840*var(--u)) auto no-repeat,url(../assets/images/top/ring-r.webp?v=1) 100% calc(560*var(--u))/calc(900*var(--u)) auto no-repeat,url(../assets/images/top/ring-l.webp?v=1) 0 calc(1150*var(--u))/calc(760*var(--u)) auto no-repeat,url(../assets/images/top/ring-r.webp?v=1) 100% calc(1500*var(--u))/calc(640*var(--u)) auto no-repeat}
.tl-pc,.tl-sc,.tl-flow{isolation:isolate}
/* v3: service card content in a flow grid (no overlap at any width) */
.tl-sc{display:grid!important;grid-template-columns:calc(135*var(--u)) 1fr calc(76*var(--u));grid-template-rows:auto auto 1fr;column-gap:calc(36*var(--u));align-content:start;padding:calc(88*var(--u)) calc(44*var(--u)) calc(40*var(--u)) calc(57*var(--u))!important}
.tl-sc .tl-ico,.tl-sc h3,.tl-sc .tl-arw,.tl-sc p,.tl-sc .tl-tags{position:relative!important;left:auto!important;top:auto!important;right:auto!important}
.tl-sc .tl-ico{grid-column:1;grid-row:1;align-self:center}
.tl-sc h3{grid-column:2;grid-row:1;height:auto;min-height:calc(100*var(--u));white-space:normal;min-width:0;font-size:max(14px,calc(37*var(--u)))}
.tl-sc .tl-arw{grid-column:3;grid-row:1;align-self:end;margin-bottom:calc(-30*var(--u));min-width:30px;min-height:30px}
.tl-sc p{grid-column:1/-1;grid-row:2;margin-top:calc(32*var(--u));font-size:max(12px,calc(28*var(--u)))}
.tl-sc .tl-tags{grid-column:1/-1;grid-row:3;align-self:start;margin-top:calc(26*var(--u));display:flex;flex-wrap:wrap;gap:calc(14*var(--u)) calc(24*var(--u))}
.tl-tags span{font-size:max(11px,calc(24*var(--u)));height:max(26px,calc(55*var(--u)))}
.tl-sc h3 br.nb{display:none}
@media (max-width:700px){
 .tl::before{opacity:.45;background:url(../assets/images/top/ring-l.webp?v=1) -60px 80px/300px auto no-repeat,url(../assets/images/top/ring-r.webp?v=1) calc(100% + 60px) 1000px/320px auto no-repeat,url(../assets/images/top/ring-l.webp?v=1) -60px 1700px/300px auto no-repeat}
 .tl-sc{grid-template-columns:60px 1fr 38px;column-gap:16px;padding:22px 18px 22px 20px!important}
 .tl-sc h3{font-size:17px;min-height:44px}
 .tl-sc .tl-arw{align-self:center;margin:0}
 .tl-sc p{margin-top:14px;font-size:14px}.tl-sc .tl-tags{margin-top:12px;gap:10px}
 .tl-tags span{font-size:12px;height:30px}
}
/* v3b: title spans to the right edge; arrow sits on its own row under the title, like the mockup */
.tl-sc{height:auto!important;min-height:calc(429*var(--u));grid-template-rows:auto auto auto 1fr}
.tl-sc h3{grid-column:2/4!important;letter-spacing:0;font-size:max(14px,calc(35*var(--u)))!important;line-height:1.3}
.tl-sc .tl-arw{grid-column:3!important;grid-row:2!important;align-self:start!important;margin:calc(-6*var(--u)) 0 0!important}
.tl-sc p{grid-row:3!important;margin-top:calc(6*var(--u))!important}
.tl-sc .tl-tags{grid-row:4!important}
@media (max-width:700px){
 .tl-sc{grid-template-columns:60px 1fr 38px;grid-template-rows:auto auto auto}
 .tl-sc h3{grid-column:2!important;font-size:17px!important}
 .tl-sc .tl-arw{grid-row:1!important;align-self:center!important;margin:0!important}
 .tl-sc p{grid-row:2!important;margin-top:14px!important}.tl-sc .tl-tags{grid-row:3!important}
}
.tl-sc{padding-right:calc(30*var(--u))!important}
.tl-sc h3{white-space:nowrap!important;font-size:calc(33*var(--u))!important}
@media (max-width:700px){.tl-sc h3{font-size:17px!important;white-space:normal!important}}
.tl::before{opacity:.8}@media (max-width:700px){.tl::before{opacity:.65}}
/* v7: CTA two-line heading */
.tl-cta{padding-top:calc(58*var(--u))}
.tl-sub{margin:calc(14*var(--u)) 0 0;font:400 max(13px,calc(30*var(--u)))/1.5 var(--serif);letter-spacing:.08em;color:#e9c98f;text-shadow:0 0 calc(10*var(--u)) #000a;white-space:nowrap}
.tl-cta .tl-btn{margin-top:calc(36*var(--u))}
@media (max-width:700px){.tl-cta{padding:30px 20px 34px}.tl-cta h2{font-size:20px}.tl-sub{margin-top:8px;font-size:13px;white-space:normal;text-align:center;line-height:1.7}.tl-cta .tl-btn{margin-top:18px}}
.tl-cta .tl-sub{margin-top:max(6px,calc(14*var(--u)))!important}
@media (max-width:700px){.tl-sub{font-size:12px!important;letter-spacing:.04em!important;padding:0 8px}}
.tl-pc.c2 img{object-position:60% 40%}
/* v10: phones — slightly smaller text */
@media (max-width:700px){
 .tl-h{font-size:20px}.tl-cap{font-size:14.5px!important;padding:0 10px 0 14px}
 .tl-sc h3{font-size:15.5px!important}.tl-sc p{font-size:13px!important}.tl-tags span{font-size:11px!important;padding:0 11px}
 .tl-line{font-size:11.5px!important}.tl-flow h2{font-size:19px}.tl-st h3{font-size:14px}.tl-st p{font-size:11.5px}
 .tl-cta h2{font-size:18px!important}.tl-sub{font-size:11.5px!important;letter-spacing:.02em!important}.tl-btn{font-size:14px;width:250px}
 .tl-brand{font-size:20px}.tl-ft nav{font-size:12px}.tl-ft small{font-size:10.5px}
 .tl-h{padding-top:40px}
}
@media (max-width:700px){.tl .tl-h{height:auto;padding:36px 0 20px;margin:0}}
/* v12: PC fonts ~9% smaller (phone @media max-width:700 unchanged) */
@media (min-width:701px){
 .tl-h{font-size:calc(45*var(--u))}
 .tl-cap{font-size:calc(30*var(--u))}
 .tl-sc h3{font-size:calc(30*var(--u))!important}
 .tl-sc p{font-size:max(12px,calc(25*var(--u)))!important}
 .tl-tags span{font-size:max(11px,calc(22*var(--u)))}
 .tl-line{font-size:calc(25*var(--u))}
 .tl-flow h2{font-size:calc(42*var(--u))}
 .tl-n{font-size:calc(34*var(--u))}
 .tl-st h3{font-size:calc(26*var(--u))}
 .tl-st p{font-size:calc(19*var(--u))}
 .tl-cta h2{font-size:calc(56*var(--u))}
 .tl-sub{font-size:max(13px,calc(27*var(--u)))}
 .tl-btn{font-size:calc(31*var(--u))}
 .tl-brand{font-size:calc(47*var(--u))}
 .tl-ft nav{font-size:calc(24*var(--u))}
 .tl-ft small{font-size:calc(21*var(--u))}
}
.tl-sc,.tl-flow{cursor:default}
/* v14: centred captions and service descriptions */
.tl-cap{justify-content:center;text-align:center}
.tl-sc p{text-align:center}
.tl-cap>span{white-space:nowrap;text-align:center}
.tl-cap{padding-left:calc(28*var(--u))}
@media (max-width:700px){.tl-cap>span{white-space:normal}}
/* v17: card 2 shows the whole dome image; bands use the caption-box brown (sampled ≈ rgb(47,29,16)) */
.tl-pc.c2 img{object-fit:contain;object-position:50% 50%;background:#2f1d10}
/* v18: 3-line card-1 caption, equal caption boxes, dome label, wagon ribbon */
.tl-pc .tl-cap{height:calc(136*var(--u));line-height:1.3}
.tl-pc img{height:calc(446*var(--u))}
.tl-pc.c1 .tl-cap{font-size:calc(30*.86*var(--u))}
.tl-lb2,.tl-lb3{position:absolute;z-index:3;pointer-events:none;font-family:var(--serif,'Noto Serif JP',serif);font-size:clamp(12px,1.05vw,19px);white-space:nowrap}
.tl-lb2{left:0;right:0;top:calc(403*var(--u));transform:translateY(-50%);text-align:center;color:#e8cf9a;letter-spacing:.12em;text-shadow:0 1px 2px #0008}
.tl-lb2::before,.tl-lb2::after{content:'';display:inline-block;width:1.6em;height:1px;background:#c99a5a;vertical-align:middle;margin:0 .6em}
.tl-lb3{left:50%;bottom:calc(145*var(--u) + 6px);transform:translateX(-50%);font-weight:600;color:#2a190e;letter-spacing:.1em;padding:.3em 1.4em;background:linear-gradient(180deg,#ffe680,#f7d94c);box-shadow:0 2px 6px #0006;clip-path:polygon(0 0,100% 0,calc(100% - .6em) 50%,100% 100%,0 100%,.6em 50%)}
@media(max-width:700px){.tl-pc .tl-cap{height:24%}.tl-pc img{height:75%}.tl-pc.c1 .tl-cap{font-size:14.5px!important}.tl-lb2{top:67.8%}.tl-lb3{bottom:calc(25% + 6px)}}
/* 2026-10-22 restored: 水色のノードが順に点滅（旧 wp-node-guide, 2026-10-09版から） */
.tl-st h3{position:relative}
.tl-node{position:absolute;left:-12px;top:calc(50% - 4px);width:8px;height:8px;border:1px solid #b9e7eb;background:#3e2a1c;border-radius:50%;animation:tl-node-guide 5.6s ease-in-out infinite}
.tl-st:nth-child(2) .tl-node{animation-delay:1.4s}
.tl-st:nth-child(3) .tl-node{animation-delay:2.8s}
.tl-st:nth-child(4) .tl-node{animation-delay:4.2s}
@keyframes tl-node-guide{0%,30%,100%{background:#3e2a1c;box-shadow:none}12%{background:#b9e7eb;box-shadow:0 0 5px #b9e7eb}}
@media (max-width:700px){.tl-node{left:-10px;width:6px;height:6px;top:calc(50% - 3px)}}
@media (prefers-reduced-motion:reduce){.tl-node{animation:none}}
/* 2026-10-22 CTA band: milk-cocoa brown + soft-faded compass rings */
.tl-cta{background:linear-gradient(115deg,#a88a72,#b8997e 50%,#b29379 70%,#a68770);border-color:#8a6d55;isolation:isolate;overflow:hidden}
.tl-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../assets/images/top/compass.webp?v=1) center/100% 100% no-repeat;filter:invert(1) sepia(.9) saturate(1.6) hue-rotate(-8deg) contrast(1.1);mix-blend-mode:multiply;opacity:.25;-webkit-mask:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%) intersect,linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.tl-cta h2{color:#2e1d10;text-shadow:0 1px 0 #ffffff55}
.tl-cta .tl-sub{color:#3b2517;text-shadow:none}
@media (max-width:700px){.tl-cta::before{background-size:cover}}
.tl::before{-webkit-mask:linear-gradient(180deg,#000 calc(100% - max(240px,calc(720*var(--u)))),transparent calc(100% - max(30px,calc(80*var(--u)))));mask:linear-gradient(180deg,#000 calc(100% - max(240px,calc(720*var(--u)))),transparent calc(100% - max(30px,calc(80*var(--u)))))}