<!-- BEGIN CONNECT GROUP ABOUT PAGE -->
<div class="dc-embed">

<style>
/* Hide WP FCTheme chrome on this page */
.container > .section-common-federal,
body > .container > .section-common-federal,
.section-common-federal,
body > .container > header,
body > .container > footer,
.container > header,
.container > footer { display: none !important; }
body > .container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.container { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
body { margin: 0 !important; padding: 0 !important; }
/* Force reveal elements visible (in case JS doesn't run) */
.dc-embed .dc-reveal { opacity: 1 !important; transform: none !important; }
.dc-hero__visual{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:500px}
.dc-hero-map{width:100%;max-width:760px;height:auto;object-fit:contain;filter:drop-shadow(0 24px 60px rgba(8,76,48,.18))}
.dc-map-img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 24px 60px rgba(8,76,48,.15))}
.dc-map__network-card{display:none!important}
.dc-map #jpFeatures path { fill: url(#jpGrad); stroke: rgba(255,255,255,0.5); stroke-width: 0.5; }

</style>

<style>

:root{
  --green:#0A8C3A;
  --green-2:#00A896;
  --green-3:#8BC34A;
  --deep:#073C2A;
  --navy:#0D1B4C;
  --ink:#14221d;
  --muted:#63736d;
  --line:rgba(10,140,58,.18);
  --soft:#EAF8F0;
  --soft-2:#F7FFFB;
  --white:#fff;
  --shadow:0 22px 70px rgba(8,76,48,.12);
  --shadow-soft:0 14px 38px rgba(8,76,48,.10);
  --radius:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --container:min(1180px, calc(100% - 48px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  background:
    radial-gradient(circle at 85% 3%, rgba(0,168,150,.18), transparent 34%),
    radial-gradient(circle at 4% 28%, rgba(139,195,74,.13), transparent 28%),
    linear-gradient(180deg,#fbfffd 0%,#f7fffb 46%,#ffffff 100%);
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(10,140,58,.20)}

.dc-lp{position:relative;isolation:isolate;overflow:hidden}
.dc-container{width:var(--container);margin-inline:auto}
.dc-section{position:relative;padding:96px 0}
.dc-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--green);font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
}
.dc-eyebrow::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--green),var(--green-2));border-radius:99px}
.dc-section-title{margin:14px 0 12px;font-size:clamp(28px,4vw,46px);line-height:1.16;letter-spacing:-.03em;font-weight:950;color:var(--deep)}
.dc-section-lead{margin:0 auto;color:var(--muted);font-size:17px;line-height:1.9;max-width:760px}
.dc-center{text-align:center}

.dc-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:82px;display:flex;align-items:center;
  transition:height .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.dc-header.is-scrolled{
  height:72px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);
  box-shadow:0 14px 50px rgba(7,60,42,.08);border-bottom:1px solid rgba(10,140,58,.10);
}
.dc-header__inner{width:var(--container);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.dc-brand{display:flex;align-items:center;gap:12px;min-width:190px}
.dc-brand img{height:50px;width:auto;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.03))}
.dc-nav{display:flex;align-items:center;gap:32px;font-weight:800;font-size:14px;color:#12281e}
.dc-nav a{position:relative;padding:8px 0;white-space:nowrap}
.dc-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--green),var(--green-2));transform:scaleX(0);transform-origin:right;transition:transform .22s var(--ease);border-radius:99px}
.dc-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.dc-header__actions{display:flex;align-items:center;gap:12px}
.dc-menu-btn{display:none;width:46px;height:46px;border:1px solid rgba(10,140,58,.16);border-radius:999px;background:rgba(255,255,255,.75);align-items:center;justify-content:center;cursor:pointer}
.dc-menu-btn span{width:18px;height:2px;border-radius:99px;background:var(--deep);display:block;position:relative;transition:transform .22s var(--ease)}
.dc-menu-btn span::before,.dc-menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:99px;background:var(--deep);transition:transform .22s var(--ease), top .22s var(--ease)}
.dc-menu-btn span::before{top:-6px}.dc-menu-btn span::after{top:6px}
.dc-menu-btn.is-open span{background:transparent}.dc-menu-btn.is-open span::before{top:0;transform:rotate(45deg)}.dc-menu-btn.is-open span::after{top:0;transform:rotate(-45deg)}

.dc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 24px;border-radius:999px;border:1px solid rgba(10,140,58,.20);
  font-weight:900;letter-spacing:.02em;transition:transform .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease), color .24s var(--ease);
  position:relative;overflow:hidden;white-space:nowrap;
}
.dc-btn::before{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.35) 44%,transparent 58%);transform:translateX(-120%);transition:transform .65s var(--ease)}
.dc-btn:hover{transform:translateY(-3px)}
.dc-btn:hover::before{transform:translateX(120%)}
.dc-btn--primary{background:linear-gradient(135deg,var(--green),#008554);color:white;box-shadow:0 14px 36px rgba(10,140,58,.24)}
.dc-btn--primary:hover{box-shadow:0 20px 54px rgba(10,140,58,.31)}
.dc-btn--ghost{background:rgba(255,255,255,.72);color:var(--green);box-shadow:0 10px 24px rgba(8,76,48,.06)}
.dc-btn--small{min-height:46px;padding-inline:18px;font-size:14px}
.dc-btn__arrow{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform .24s var(--ease)}
.dc-btn:hover .dc-btn__arrow{transform:translateX(3px)}
.dc-btn--ghost .dc-btn__arrow{background:rgba(10,140,58,.10)}

.dc-hero{
  min-height:calc(100vh - 0px);padding:112px 0 34px;display:flex;align-items:center;position:relative;overflow:hidden;
}
.dc-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg, #fcfffe 0%, #fcfffe 48%, rgba(252,255,254,.78) 58%, rgba(252,255,254,.2) 72%, transparent 85%),
    url('https://dragon-connect.net/wp-content/uploads/2026/05/japan-hero-map.png') 102% center/auto 88% no-repeat,
    radial-gradient(circle at 88% 40%, rgba(0,168,150,.18), transparent 38%),
    linear-gradient(180deg, #fcfffe 0%, #effcf6 100%);
  background-color:#fcfffe;
}
.dc-hero::after{
  content:"";position:absolute;left:-4%;right:-4%;bottom:-2px;height:210px;z-index:-1;
  background:
    linear-gradient(to top,rgba(255,255,255,1) 0%,rgba(255,255,255,.86) 38%,rgba(255,255,255,0) 100%),
    url("data:image/svg+xml,%3Csvg width='1600' height='260' viewBox='0 0 1600 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop stop-color='%230A8C3A' stop-opacity='.17'/%3E%3Cstop offset='.5' stop-color='%2300A896' stop-opacity='.13'/%3E%3Cstop offset='1' stop-color='%230A8C3A' stop-opacity='.08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 215 C150 165 265 220 410 145 C555 70 678 190 840 125 C990 64 1120 118 1276 82 C1420 48 1510 75 1600 32 L1600 260 L0 260 Z' fill='url(%23g)'/%3E%3Cpath d='M0 236 C170 178 336 226 520 170 C715 111 820 200 1000 136 C1178 73 1368 98 1600 46' stroke='%230A8C3A' stroke-opacity='.14' stroke-width='2' fill='none'/%3E%3C/svg%3E") center bottom/cover no-repeat;
}
.dc-hero__grid{display:grid;grid-template-columns:1fr;align-items:center;gap:34px;width:var(--container);margin:auto}
.dc-hero__copy{position:relative;z-index:4;padding-top:20px;max-width:560px}
.dc-hero__badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(10,140,58,.15);color:var(--green);font-weight:900;font-size:13px;box-shadow:0 10px 34px rgba(8,76,48,.08);
}
.dc-hero__badge-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(10,140,58,.10);animation:dcPulseDot 2s var(--ease) infinite}
.dc-hero h1{margin:24px 0 22px;font-size:clamp(36px,4.6vw,62px);line-height:1.18;letter-spacing:-.06em;font-weight:950;color:#131d18}
.dc-hero h1 .accent{color:var(--green);position:relative;display:inline-block}
.dc-hero h1 .accent::after{content:"";position:absolute;left:.04em;right:.04em;bottom:.1em;height:.18em;background:rgba(139,195,74,.28);z-index:-1;border-radius:999px;transform:skewX(-10deg)}
.dc-hero__lead{max-width:560px;font-size:18px;line-height:2.05;color:#263d34;margin:0 0 32px;font-weight:600}
.dc-hero__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dc-hero__micro{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;color:#597069;font-weight:800;font-size:13px}
.dc-hero__micro span{display:inline-flex;align-items:center;gap:7px}.dc-hero__micro span::before{content:"";width:8px;height:8px;background:linear-gradient(135deg,var(--green),var(--green-2));border-radius:50%}
.dc-map-stage{position:relative;min-height:auto;display:grid;place-items:center;perspective:1300px}
.dc-map-card{position:relative;width:100%;aspect-ratio:1916/836;height:auto;min-height:auto;transform-style:preserve-3d;
  filter:drop-shadow(0 30px 60px rgba(8,76,48,.12));
}
.dc-map-card::before{content:"";position:absolute;inset:40px 4px 20px 90px;border-radius:55% 45% 50% 50%;background:radial-gradient(circle at 55% 50%, rgba(255,255,255,.7), rgba(255,255,255,0) 58%), radial-gradient(circle at 45% 55%, rgba(0,168,150,.16), transparent 55%);filter:blur(2px)}
.dc-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dc-map .land{fill:url(#landGradient);stroke:rgba(10,140,58,.54);stroke-width:1.1;filter:url(#mapGlow)}
.dc-map .land-soft{fill:rgba(139,195,74,.16);stroke:rgba(10,140,58,.16);stroke-width:.8}
.dc-map .map-grid{opacity:.22}
.dc-map .arc{fill:none;stroke:url(#arcGradient);stroke-width:2.1;stroke-linecap:round;stroke-dasharray:6 12;animation:dcDash 7s linear infinite;filter:url(#arcGlow)}
.dc-map .arc.thin{stroke-width:1.4;opacity:.75;animation-duration:9s}
.dc-map .node-ring{fill:rgba(255,255,255,.82);stroke:rgba(10,140,58,.28);stroke-width:1.4;filter:url(#nodeShadow);animation:dcNodeRing 2.4s var(--ease) infinite}
.dc-map .node{fill:#fff;stroke:#9AF26D;stroke-width:3;filter:url(#nodeGlow)}
.dc-map .node.hot{stroke:#fff04a;fill:#ecffd6}
.dc-map .halo{fill:rgba(154,242,109,.24);animation:dcHalo 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
.dc-map-label{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.83);
  border:1px solid rgba(10,140,58,.14);box-shadow:0 13px 34px rgba(8,76,48,.10);font-weight:900;font-size:13px;color:#17392c;backdrop-filter:blur(14px);animation:dcFloatLabel 4.2s ease-in-out infinite;
}
.dc-map-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(10,140,58,.10)}

.dc-map__network-card{position:absolute;left:30%;top:6%;transform:none;z-index:4;display:flex;align-items:center;gap:13px;padding:16px 20px;border-radius:24px;background:rgba(255,255,255,.83);border:1px solid rgba(10,140,58,.16);box-shadow:0 22px 60px rgba(8,76,48,.13);backdrop-filter:blur(16px);animation:dcFloatCard 5s ease-in-out infinite;
}
.dc-map__network-card img{width:44px;height:44px;object-fit:contain}.dc-map__network-card strong{display:block;color:var(--deep);font-size:14px}.dc-map__network-card span{display:block;color:var(--green);font-weight:950;font-size:16px;letter-spacing:.04em}
.dc-scroll-cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:grid;place-items:center;gap:6px;color:var(--green);font-weight:900;font-size:10px;letter-spacing:.22em;text-transform:uppercase;z-index:4}
.dc-scroll-cue::after{content:"";width:14px;height:14px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:dcScroll 1.8s ease-in-out infinite}

.dc-stats{padding-top:78px;background:#fff}
.dc-stats::before{content:"";position:absolute;inset:0 0 auto 0;height:160px;background:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,0));pointer-events:none}
.dc-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
.dc-metric-card{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-height:230px;padding:26px 22px 22px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,255,251,.86));border:1px solid rgba(10,140,58,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 46px rgba(8,76,48,.10);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.dc-metric-card::before{content:"";position:absolute;right:-36px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(10,140,58,.16),transparent 65%);transition:transform .4s var(--ease);pointer-events:none}
.dc-metric-card::after{content:attr(data-index);position:absolute;top:14px;right:16px;font-size:10px;font-weight:900;color:rgba(10,140,58,.34);letter-spacing:.22em;font-variant-numeric:tabular-nums;z-index:1}
.dc-metric-card:hover{transform:translateY(-9px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 30px 70px rgba(8,76,48,.18);border-color:rgba(10,140,58,.28)}
.dc-metric-card:hover::before{transform:scale(1.18) rotate(8deg)}
.dc-metric-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#0fa84e,#008768);box-shadow:0 14px 32px rgba(10,140,58,.32),inset 0 1px 0 rgba(255,255,255,.35);margin-bottom:8px}
.dc-metric-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.dc-metric-label{font-weight:800;color:#516057;font-size:11px;margin:0 0 4px;letter-spacing:.12em;text-transform:uppercase}
.dc-metric-value{font-size:clamp(28px,2.6vw,36px);line-height:1.05;font-weight:950;background:linear-gradient(135deg,#0fa84e 0%,#008768 55%,#0A8C3A 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;letter-spacing:-.04em;white-space:nowrap;display:inline-block}
.dc-metric-unit{font-size:13px;color:var(--deep);font-weight:900;margin-left:4px;background:none;-webkit-text-fill-color:initial;color:var(--deep)}
.dc-metric-desc{margin:auto 0 0;color:#5b6e66;font-size:12.5px;line-height:1.7;font-weight:650;padding-top:14px}
.dc-note{margin:24px 0 0;text-align:right;color:#7a8a85;font-size:12px;letter-spacing:.02em}

.dc-economy{padding-top:88px;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f6fffb 68%,#fff 100%)}
.dc-economy::before{content:"";position:absolute;left:-12%;bottom:16%;width:48%;height:54%;background:radial-gradient(circle at 45% 52%,rgba(139,195,74,.16),transparent 60%);filter:blur(20px)}
.dc-economy::after{content:"";position:absolute;right:-16%;top:18%;width:55%;height:55%;background:radial-gradient(circle at 50% 50%,rgba(0,168,150,.15),transparent 63%);filter:blur(22px)}
.dc-economy-stage{position:relative;z-index:2;margin:42px auto 0;max-width:1180px;min-height:420px;padding:50px 30px;display:grid;place-items:center}
.dc-economy-bg{position:absolute;inset:0;border-radius:36px;background-image:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.45) 60%,rgba(255,255,255,.20)),url('https://images.unsplash.com/photo-1466611653911-95081537e5b7?w=1800&h=700&fit=crop&q=80');background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(10,140,58,.08),0 24px 60px rgba(8,76,48,.10);overflow:hidden}
.dc-economy-bg::before{display:none}.dc-economy-bg::after{display:none}
.dc-orbit{position:absolute;inset:54px 74px;border:1.5px solid rgba(10,140,58,.24);border-radius:50%;animation:dcOrbit 28s linear infinite}.dc-orbit::before,.dc-orbit::after{content:"";position:absolute;inset:32px 58px;border:1px dashed rgba(10,140,58,.20);border-radius:50%;animation:dcOrbitReverse 22s linear infinite}.dc-orbit::after{inset:72px 120px;opacity:.75;animation-duration:34s}
.dc-economy-center{position:relative;z-index:4;display:grid;place-items:center;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.90);border:1px solid rgba(10,140,58,.13);box-shadow:0 30px 86px rgba(8,76,48,.16);text-align:center;backdrop-filter:blur(14px);animation:dcCenterPulse 4s ease-in-out infinite}.dc-economy-center img{width:50px;height:50px;object-fit:contain;margin-bottom:4px}.dc-economy-center strong{display:block;font-size:16px;line-height:1.1;color:var(--deep);letter-spacing:-.03em}.dc-economy-center span{display:block;font-size:11px;color:var(--muted);font-weight:800;margin-top:4px}
.dc-econ-item{position:absolute;z-index:5;display:grid;place-items:center;gap:10px;text-align:center;transform:translate(-50%,-50%);left:var(--x);top:var(--y);color:var(--c)}
.dc-econ-bubble{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#fff;border:0;box-shadow:0 12px 32px rgba(8,76,48,.18),inset 0 0 0 2px currentColor;font-weight:950;color:currentColor;transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.dc-econ-bubble svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.dc-econ-item:hover .dc-econ-bubble{transform:translateY(-7px) scale(1.04);box-shadow:0 28px 70px rgba(8,76,48,.16)}.dc-econ-title{font-size:12px;font-weight:900;color:#0a2218;line-height:1.4;white-space:nowrap;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);padding:3px 10px;border-radius:99px;margin-top:6px;box-shadow:0 4px 12px rgba(8,76,48,.10)}
.dc-econ-line{position:absolute;z-index:3;inset:0;pointer-events:none}.dc-econ-line path{fill:none;stroke:rgba(10,140,58,.45);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 8;animation:dcDash 9s linear infinite}.dc-econ-line path:nth-child(2n){animation-duration:12s;opacity:.65}

.dc-services{background:#fff;padding-top:88px}.dc-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}.dc-service-card{position:relative;min-height:286px;border-radius:22px;background:#fff;border:1px solid rgba(10,140,58,.11);box-shadow:0 18px 42px rgba(8,76,48,.08);overflow:hidden;transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}.dc-service-card:hover{transform:translateY(-8px);box-shadow:0 30px 76px rgba(8,76,48,.14);border-color:rgba(10,140,58,.24)}.dc-service-visual{height:152px;position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#e6f5ec}.dc-service-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,60,42,.06) 0%,rgba(7,60,42,.18) 100%);transition:opacity .35s var(--ease);pointer-events:none}.dc-service-card:hover .dc-service-visual{transform:none}.dc-service-card:hover .dc-service-visual::before{opacity:.7}.dc-service-body{padding:20px 20px 22px}.dc-service-body h3{margin:0 0 10px;color:var(--green);font-size:17px;line-height:1.25;font-weight:950}.dc-service-body p{margin:0;color:#566a63;font-size:13.5px;line-height:1.75;font-weight:650}.dc-card-arrow{position:absolute;right:16px;bottom:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--green);border:1px solid rgba(10,140,58,.25);background:rgba(255,255,255,.8);transition:transform .22s var(--ease),background .22s var(--ease),color .22s var(--ease)}.dc-service-card:hover .dc-card-arrow{transform:translateX(4px);background:var(--green);color:#fff}.dc-service-more{text-align:center;margin-top:34px}

.dc-cta{padding:72px 0 96px;background:#fff}.dc-cta-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:32px;align-items:center;border-radius:34px;background:linear-gradient(135deg,rgba(227,249,237,.92),rgba(241,255,250,.92));border:1px solid rgba(10,140,58,.11);box-shadow:var(--shadow);padding:44px 52px}.dc-cta-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 45%,transparent 58%);transform:translateX(-105%);animation:dcShine 8s ease-in-out infinite;pointer-events:none}.dc-cta-copy{position:relative;z-index:1}.dc-cta-card h2{margin:0 0 10px;font-size:clamp(24px,2.7vw,34px);line-height:1.3;letter-spacing:-.03em;color:var(--deep)}.dc-cta-card p{margin:0 0 22px;color:#475f56;font-weight:700;line-height:1.8;font-size:14.5px}.dc-cta-photo{position:relative;z-index:1;height:220px;border-radius:22px;background-image:url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=720&h=520&fit=crop&q=80');background-size:cover;background-position:center;box-shadow:0 24px 50px rgba(7,60,42,.18)}.dc-cta-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;position:relative;z-index:1}.dc-cta-menu a{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.78);border:1px solid rgba(10,140,58,.10);font-weight:900;color:#214237;font-size:13.5px;transition:transform .22s var(--ease),background .22s var(--ease)}.dc-cta-menu a:hover{transform:translateY(-3px);background:#fff}.dc-cta-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:rgba(10,140,58,.10);color:var(--green);font-size:13px}

.dc-footer{background:var(--deep);color:#d7f4e4;padding:46px 0}.dc-footer__inner{width:var(--container);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.dc-footer img{height:58px;width:auto;filter:brightness(0) invert(1);opacity:.92}.dc-footer p{margin:0;color:rgba(215,244,228,.72);font-size:13px;line-height:1.7;text-align:right}.dc-page-top{position:fixed;right:22px;bottom:22px;z-index:40;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(10,140,58,.16);background:rgba(255,255,255,.78);backdrop-filter:blur(14px);box-shadow:0 12px 32px rgba(8,76,48,.16);color:var(--green);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .22s var(--ease),transform .22s var(--ease)}.dc-page-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}

.dc-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.dc-reveal.is-visible{opacity:1;transform:translateY(0)}.dc-reveal[data-delay="1"]{transition-delay:.08s}.dc-reveal[data-delay="2"]{transition-delay:.16s}.dc-reveal[data-delay="3"]{transition-delay:.24s}.dc-reveal[data-delay="4"]{transition-delay:.32s}.dc-reveal[data-delay="5"]{transition-delay:.40s}



/* Dragon Curve Brand Motif */
.dc-hero__grid{position:relative;z-index:2}
.dc-dragon-hero{
  position:absolute;right:-14%;top:10%;width:min(860px,74vw);height:min(620px,62vh);
  z-index:0;opacity:.32;pointer-events:none;transform:rotate(-12deg);filter:drop-shadow(0 24px 62px rgba(10,140,58,.12));
}
.dc-dragon-path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dc-dragon-path--base{stroke:rgba(10,140,58,.16);stroke-width:10;filter:drop-shadow(0 0 10px rgba(0,168,150,.12))}
.dc-dragon-path--main{stroke:url(#dcDragonGradient);stroke-width:7;stroke-dasharray:1;stroke-dashoffset:1;animation:dcDragonDraw 3.8s var(--ease) forwards, dcDragonGlow 4.6s ease-in-out infinite 3.8s;filter:drop-shadow(0 0 18px rgba(10,140,58,.22))}
.dc-dragon-path--flow{stroke:rgba(199,255,88,.92);stroke-width:4;stroke-dasharray:.018 .045;stroke-dashoffset:0;animation:dcDragonTrace 4.8s linear infinite;filter:drop-shadow(0 0 12px rgba(199,255,88,.65))}
.dc-dragon-hero .dc-dragon-path--base{stroke-width:8;opacity:.62}.dc-dragon-hero .dc-dragon-path--flow{stroke-width:3;opacity:.64}

.dc-dragon{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f4fff9 52%,#fff 100%);padding-top:88px;padding-bottom:96px}
.dc-dragon::before{content:"";position:absolute;left:-14%;top:8%;width:42%;height:58%;border-radius:50%;background:radial-gradient(circle,rgba(139,195,74,.18),transparent 64%);filter:blur(24px)}
.dc-dragon::after{content:"";position:absolute;right:-12%;bottom:10%;width:44%;height:54%;border-radius:50%;background:radial-gradient(circle,rgba(0,168,150,.14),transparent 65%);filter:blur(24px)}
.dc-dragon__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.34fr) minmax(320px,.74fr);gap:40px;align-items:center}
.dc-dragon-card{position:relative;min-height:680px;border-radius:44px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(232,250,240,.86));border:1px solid rgba(10,140,58,.13);box-shadow:0 32px 80px rgba(8,76,48,.12);isolation:isolate}
.dc-dragon-card::before{content:"";position:absolute;inset:-14%;background:radial-gradient(circle at 24% 24%,rgba(255,255,255,.92),transparent 24%),radial-gradient(circle at 76% 68%,rgba(0,168,150,.18),transparent 31%),linear-gradient(135deg,rgba(10,140,58,.04),transparent 48%);z-index:-2}
.dc-dragon-card::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(10,140,58,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(10,140,58,.06) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 55% 50%,#000 0%,transparent 68%);opacity:.72;z-index:-1}
.dc-dragon-card__badge{position:absolute;left:30px;top:28px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(10,140,58,.15);box-shadow:0 12px 36px rgba(8,76,48,.08);color:var(--green);font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.dc-dragon-card__badge::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-2));box-shadow:0 0 0 7px rgba(10,140,58,.10)}
.dc-dragon-svg{position:absolute;left:-46px;right:-46px;top:-38px;bottom:58px;width:calc(100% + 92px);height:calc(100% - 20px);overflow:visible;transform:rotate(-5deg) scale(1.22);transform-origin:center;animation:dcDragonFloatLarge 8s ease-in-out infinite}
.dc-dragon-svg defs{position:absolute}.dc-dragon-nodes circle{fill:#fff;stroke:#9af26d;stroke-width:7;filter:drop-shadow(0 0 14px rgba(199,255,88,.9)) drop-shadow(0 12px 18px rgba(8,76,48,.16));animation:dcDragonNode 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.dc-dragon-nodes circle:nth-child(2n){animation-delay:.28s}.dc-dragon-nodes circle:nth-child(3n){animation-delay:.52s}.dc-dragon-symbol{position:absolute;left:28px;right:28px;bottom:24px;z-index:4;display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:24px;background:rgba(255,255,255,.80);border:1px solid rgba(10,140,58,.13);box-shadow:0 18px 46px rgba(8,76,48,.11);backdrop-filter:blur(16px)}
.dc-dragon-symbol img{width:52px;height:52px;object-fit:contain}.dc-dragon-symbol strong{display:block;color:var(--deep);font-size:14px;letter-spacing:.14em;font-weight:950}.dc-dragon-symbol span{display:block;margin-top:4px;color:#5b7068;font-weight:800;font-size:12px;line-height:1.5}
.dc-dragon__copy .dc-section-lead{margin-left:0;text-align:left;max-width:560px}.dc-dragon-values{display:grid;gap:12px;margin-top:24px}.dc-dragon-value{display:grid;grid-template-columns:48px 1fr;gap:2px 16px;align-items:start;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.74);border:1px solid rgba(10,140,58,.12);box-shadow:0 14px 36px rgba(8,76,48,.07);transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease)}.dc-dragon-value:hover{transform:translateY(-5px);box-shadow:0 22px 58px rgba(8,76,48,.12);border-color:rgba(10,140,58,.22)}.dc-dragon-value span{grid-row:1 / span 2;display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,rgba(10,140,58,.12),rgba(0,168,150,.08));color:var(--green);font-size:13px;font-weight:950}.dc-dragon-value strong{color:var(--deep);font-size:18px;font-weight:950;letter-spacing:.01em}.dc-dragon-value p{margin:4px 0 0;color:#60746d;font-size:14px;font-weight:700;line-height:1.7}
.dc-dragon-economy-bg{position:absolute;left:50%;top:50%;width:min(900px,94%);height:min(620px,90%);transform:translate(-50%,-50%) rotate(-8deg) scale(1.08);opacity:.2;pointer-events:none}.dc-dragon-economy-bg .dc-dragon-path--base{stroke-width:9}.dc-dragon-economy-bg .dc-dragon-path--flow{stroke-width:3;opacity:.8}



/* Dragon Curve explanation block */
.dc-dragon-primer{position:relative;z-index:3;margin-bottom:42px;text-align:center}
.dc-dragon-primer__copy{max-width:880px;margin:0 auto}.dc-dragon-primer__copy .dc-section-lead{max-width:820px}
.dc-dragon-formula{margin:28px auto 30px;max-width:820px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(10,140,58,.13);box-shadow:0 16px 42px rgba(8,76,48,.08);backdrop-filter:blur(14px)}
.dc-dragon-formula span{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 17px;border-radius:999px;background:linear-gradient(135deg,rgba(10,140,58,.10),rgba(0,168,150,.07));color:var(--deep);font-size:13px;font-weight:950;letter-spacing:.02em;white-space:nowrap}.dc-dragon-formula span:last-child{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;box-shadow:0 12px 30px rgba(10,140,58,.18)}
.dc-dragon-formula i{position:relative;width:34px;height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(10,140,58,.16),rgba(10,140,58,.74));overflow:hidden}.dc-dragon-formula i::after{content:"";position:absolute;inset:-1px;width:12px;background:#c7ff58;box-shadow:0 0 12px rgba(199,255,88,.8);animation:dcFormulaFlow 1.8s linear infinite}
.dc-dragon-primer__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}.dc-dragon-primer-card{position:relative;padding:24px 24px 22px;border-radius:26px;background:rgba(255,255,255,.78);border:1px solid rgba(10,140,58,.13);box-shadow:0 16px 44px rgba(8,76,48,.08);overflow:hidden;transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease)}.dc-dragon-primer-card:hover{transform:translateY(-6px);box-shadow:0 22px 58px rgba(8,76,48,.13);border-color:rgba(10,140,58,.22)}.dc-dragon-primer-card::before{content:"";position:absolute;right:-36px;top:-36px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(139,195,74,.20),transparent 64%)}.dc-dragon-primer-card span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,rgba(10,140,58,.14),rgba(0,168,150,.08));color:var(--green);font-size:13px;font-weight:950}.dc-dragon-primer-card strong{display:block;margin-top:16px;color:var(--deep);font-size:20px;font-weight:950}.dc-dragon-primer-card p{margin:8px 0 0;color:#60746d;font-size:14px;font-weight:750;line-height:1.72}.dc-dragon-meaning{display:grid;grid-template-columns:210px 1fr;align-items:center;gap:22px;text-align:left;margin:22px auto 0;padding:22px 26px;border-radius:28px;background:linear-gradient(135deg,rgba(10,140,58,.09),rgba(255,255,255,.80));border:1px solid rgba(10,140,58,.15);box-shadow:0 16px 42px rgba(8,76,48,.08);max-width:1040px}.dc-dragon-meaning__label{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(10,140,58,.13);color:var(--green);font-size:13px;font-weight:950;letter-spacing:.08em}.dc-dragon-meaning p{margin:0;color:#425850;font-size:15px;font-weight:800;line-height:1.9}
.dc-dragon-primer-note{margin:16px auto 0;color:#73867f;font-size:12px;font-weight:700;line-height:1.7;text-align:center}

@keyframes dcFormulaFlow{from{transform:translateX(-14px)}to{transform:translateX(42px)}}

@keyframes dcDragonDraw{to{stroke-dashoffset:0}}
@keyframes dcDragonTrace{to{stroke-dashoffset:-1}}
@keyframes dcDragonGlow{0%,100%{opacity:.88}50%{opacity:1}}
@keyframes dcDragonFloat{0%,100%{transform:rotate(-4deg) translate3d(0,0,0)}50%{transform:rotate(-2deg) translate3d(0,-12px,0)}}
@keyframes dcDragonFloatLarge{0%,100%{transform:rotate(-5deg) scale(1.22) translate3d(0,0,0)}50%{transform:rotate(-3deg) scale(1.25) translate3d(0,-14px,0)}}
@keyframes dcDragonNode{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.34);opacity:1}}

@keyframes dcDash{to{stroke-dashoffset:-120}}
@keyframes dcPulseDot{0%,100%{transform:scale(1)}50%{transform:scale(.72)}}
@keyframes dcHalo{0%{transform:scale(.55);opacity:.62}80%,100%{transform:scale(2.2);opacity:0}}
@keyframes dcNodeRing{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes dcFloatLabel{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes dcFloatCard{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}
@keyframes dcScroll{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.65}50%{transform:rotate(45deg) translate(5px,5px);opacity:1}}
@keyframes dcOrbit{to{transform:rotate(360deg)}}
@keyframes dcOrbitReverse{to{transform:rotate(-360deg)}}
@keyframes dcCenterPulse{0%,100%{box-shadow:0 30px 86px rgba(8,76,48,.16),0 0 0 0 rgba(10,140,58,.10)}50%{box-shadow:0 34px 92px rgba(8,76,48,.18),0 0 0 18px rgba(10,140,58,0)}}
@keyframes dcShine{0%,35%{transform:translateX(-105%)}55%,100%{transform:translateX(105%)}}

@media (max-width:1080px){
  .dc-nav{gap:20px}.dc-hero__grid{grid-template-columns:1fr}.dc-hero__copy{text-align:center}.dc-hero__lead{margin-inline:auto}.dc-hero__actions,.dc-hero__micro{justify-content:center}.dc-map-stage{min-height:520px}.dc-map-card{height:520px}.dc-metrics{grid-template-columns:repeat(2,1fr)}.dc-service-grid{grid-template-columns:repeat(2,1fr)}.dc-cta-card{grid-template-columns:1fr}.dc-footer__inner{flex-direction:column;text-align:center}.dc-footer p{text-align:center}.dc-brand img{height:46px}
}
@media (max-width:860px){
  :root{--container:min(100% - 32px,1180px)}
  .dc-header{height:74px}.dc-header.is-scrolled{height:68px}.dc-nav{position:fixed;top:74px;left:16px;right:16px;display:grid;gap:6px;padding:18px;border-radius:22px;background:rgba(255,255,255,.94);border:1px solid rgba(10,140,58,.10);box-shadow:0 20px 60px rgba(8,76,48,.14);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease)}.dc-nav.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.dc-nav a{padding:12px}.dc-menu-btn{display:flex}.dc-header__actions .dc-btn{display:none}.dc-hero{padding-top:92px}.dc-hero h1{font-size:clamp(36px,10.2vw,58px)}.dc-hero__lead{font-size:16px}.dc-map-stage{min-height:410px}.dc-map-card{height:410px}.dc-map-label{font-size:11px;padding:7px 10px}.dc-map__network-card{padding:12px 14px}.dc-map__network-card img{width:34px;height:34px}.dc-map__network-card span{font-size:13px}.dc-section{padding:72px 0}.dc-economy-stage{min-height:660px}.dc-economy-bg{border-radius:30px}.dc-orbit{inset:80px 20px}.dc-economy-center{width:154px;height:154px}.dc-econ-item{left:var(--mx);top:var(--my)}.dc-econ-bubble{width:72px;height:72px}.dc-econ-title{font-size:12px}.dc-econ-line{display:none}.dc-cta-card{padding:34px 24px}.dc-brand img{height:42px}
}
@media (max-width:620px){
  :root{--container:calc(100% - 24px)}
  .dc-brand{min-width:0}.dc-brand img{height:38px;max-width:190px}.dc-btn{width:100%}.dc-hero__actions{width:100%}.dc-hero__badge{font-size:12px}.dc-map-stage{min-height:330px;margin-inline:-22px}.dc-map-card{height:345px;width:100%}.dc-map-label{display:none}.dc-map__network-card{left:50%;top:50%}.dc-metrics{grid-template-columns:1fr}.dc-metric-card{min-height:124px;padding:20px}.dc-service-grid{grid-template-columns:1fr}.dc-economy-stage{min-height:720px;margin-top:34px}.dc-economy-bg::before,.dc-economy-bg::after{display:none}.dc-economy-center{width:138px;height:138px}.dc-economy-center strong{font-size:18px}.dc-econ-bubble{width:64px;height:64px}.dc-econ-bubble svg{width:28px;height:28px}.dc-econ-title{white-space:normal;min-width:110px}.dc-cta-menu{grid-template-columns:1fr}.dc-footer img{height:48px}.dc-note{text-align:center}.dc-scroll-cue{display:none}
}

@media (max-width:1080px){
  .dc-dragon-primer__cards{grid-template-columns:1fr}.dc-dragon-meaning{grid-template-columns:1fr;text-align:center}.dc-dragon-meaning p{text-align:center}
  .dc-dragon__grid{grid-template-columns:1fr;gap:30px}.dc-dragon__copy{text-align:center}.dc-dragon__copy .dc-section-lead{margin-inline:auto;text-align:center}.dc-dragon-card{min-height:560px}.dc-dragon-svg{left:-26px;right:-26px;top:-28px;bottom:52px;width:calc(100% + 52px);height:calc(100% - 24px);transform:rotate(-5deg) scale(1.16)}.dc-dragon-hero{right:-24%;top:23%;width:92vw;opacity:.22}
}
@media (max-width:620px){
  .dc-dragon-formula{border-radius:28px;gap:10px}.dc-dragon-formula i{width:22px}.dc-dragon-primer-card{padding:20px}.dc-dragon-meaning{padding:18px;border-radius:22px}.dc-dragon-meaning__label{min-height:42px}
  .dc-dragon{padding-top:72px;padding-bottom:76px}.dc-dragon-card{min-height:460px;border-radius:30px}.dc-dragon-card__badge{left:18px;top:18px;font-size:10px}.dc-dragon-svg{left:-18px;right:-18px;top:-18px;bottom:62px;width:calc(100% + 36px);height:calc(100% - 32px);transform:rotate(-4deg) scale(1.08)}.dc-dragon-symbol{left:16px;right:16px;bottom:16px;padding:14px 14px;border-radius:20px}.dc-dragon-symbol img{width:44px;height:44px}.dc-dragon-symbol strong{font-size:12px}.dc-dragon-symbol span{font-size:11px}.dc-dragon-value{grid-template-columns:40px 1fr;padding:16px}.dc-dragon-value span{width:36px;height:36px;border-radius:12px}.dc-dragon-hero{display:none}.dc-dragon-economy-bg{opacity:.10;width:118%;height:72%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.dc-dragon__visual{position:relative}.dc-dragon__copy{position:relative;z-index:2}

  </style>
<div class="dc-lp" id="top">
  <header class="dc-header" data-header>
    <div class="dc-header__inner">
      <a class="dc-brand" href="#top" aria-label="CONNECT GROUP トップへ"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20280%2080'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20x2%3D'1'%20y1%3D'0'%20y2%3D'1'%3E%3Cstop%20stop-color%3D'%230A8C3A'%2F%3E%3Cstop%20offset%3D'.48'%20stop-color%3D'%2300A896'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238BC34A'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D'translate(8%2014)'%3E%3Ccircle%20cx%3D'26'%20cy%3D'26'%20r%3D'19'%20fill%3D'none'%20stroke%3D'url(%23g)'%20stroke-width%3D'3.2'%2F%3E%3Cpath%20d%3D'M16%2026%20L22%2017%20L28%2034%20L36%2026'%20fill%3D'none'%20stroke%3D'url(%23g)'%20stroke-width%3D'3.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fg%3E%3Ctext%20x%3D'68'%20y%3D'34'%20font-family%3D'-apple-system%2CBlinkMacSystemFont%2Csans-serif'%20font-weight%3D'800'%20font-size%3D'22'%20fill%3D'%23073C2A'%3EConnect%20Group%3C%2Ftext%3E%3Ctext%20x%3D'70'%20y%3D'54'%20font-family%3D'-apple-system%2CBlinkMacSystemFont%2Csans-serif'%20font-weight%3D'700'%20font-size%3D'10'%20fill%3D'%230A8C3A'%20letter-spacing%3D'2'%3EDRAGON%20CONNECT%3C%2Ftext%3E%3C%2Fsvg%3E" alt="CONNECT GROUP - connect management -"></a>
      <nav class="dc-nav" data-nav aria-label="グローバルナビゲーション">
        <a href="#about">私たちについて</a>
        <a href="/business/">事業一覧</a>
        <a href="/news/">ニュース</a>
        <a href="/recruit/">採用・ローカリスト登録</a>
        <a href="/about/">会社情報</a>
      </nav>
      <div class="dc-header__actions">
        <a class="dc-btn dc-btn--primary dc-btn--small" href="/contact/"><span>無料相談する</span><span class="dc-btn__arrow">→</span></a>
        <button class="dc-menu-btn" data-menu aria-label="メニューを開閉"><span></span></button>
      </div>
    </div>
  </header>

  <main>
    <section class="dc-hero" id="about">
      <svg class="dc-dragon-hero" viewBox="0 0 1000 720" aria-hidden="true">
        <defs>
          <linearGradient id="dcDragonGradient" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#0A8C3A"/><stop offset=".48" stop-color="#00A896"/><stop offset="1" stop-color="#8BC34A"/></linearGradient>
        </defs>
        <path class="dc-dragon-path dc-dragon-path--base" data-dragon-path pathLength="1"></path>
        <path class="dc-dragon-path dc-dragon-path--flow" data-dragon-path pathLength="1"></path>
      </svg>
      <div class="dc-hero__grid">
        <div class="dc-hero__copy dc-reveal">
          <h1>コネクトテクノロジーで、<br>世界を<span class="accent">前進</span>させる。</h1>
          <p class="dc-hero__lead">地域産業・地域医療の発展に寄与するために、<br>人脈・技術・ノウハウをつなぎ、<br>一家に一人、一法人に一人、<br>専門家がいる世の中を目指します。</p>
          <div class="dc-hero__actions">
            <a class="dc-btn dc-btn--primary" href="/contact/"><span>無料相談する</span><span class="dc-btn__arrow">→</span></a>
            <a class="dc-btn dc-btn--ghost" href="/business/"><span>事業一覧を見る</span><span class="dc-btn__arrow">→</span></a>
          </div>
        </div>
      </div>
      <div class="dc-scroll-cue">scroll</div>
    </section>

    <section class="dc-section dc-stats" id="stats">
      <div class="dc-container dc-center">
        <div class="dc-eyebrow dc-reveal">Achievements</div>
        <h2 class="dc-section-title dc-reveal" data-delay="1">実績が、信頼をつくる</h2>
        <p class="dc-section-lead dc-reveal" data-delay="2">全国に広がるネットワークと、積み重ねてきた支援の実績が、<br>多くのパートナーや会社からの信頼につながっています。</p>
        <div class="dc-metrics" data-counter-root>
          <article class="dc-metric-card dc-reveal" data-delay="1" data-index="01"><div class="dc-metric-icon"><svg viewBox="0 0 24 24"><path d="M12 21s7-6.2 7-12A7 7 0 0 0 5 9c0 5.8 7 12 7 12Z"/><circle cx="12" cy="9" r="2.4"/></svg></div><div><div class="dc-metric-label">支援拠点数</div><div><span class="dc-metric-value" data-count="47">47</span><span class="dc-metric-unit">拠点</span></div></div><p class="dc-metric-desc">全国各地で地域に寄り添う支援を展開</p></article>
          <article class="dc-metric-card dc-reveal" data-delay="2" data-index="02"><div class="dc-metric-icon"><svg viewBox="0 0 24 24"><path d="M16 20v-1.4a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4V20"/><circle cx="9.5" cy="7" r="3.2"/><path d="M22 20v-1.2a3.5 3.5 0 0 0-3-3.5"/><path d="M16.8 4.2a3 3 0 0 1 0 5.8"/></svg></div><div><div class="dc-metric-label">連携パートナー数</div><div><span class="dc-metric-value" data-count="1250" data-plus="true">1,250+</span><span class="dc-metric-unit">社</span></div></div><p class="dc-metric-desc">多様なパートナーと共に価値を創造</p></article>
          <article class="dc-metric-card dc-reveal" data-delay="3" data-index="03"><div class="dc-metric-icon"><svg viewBox="0 0 24 24"><path d="M4 19V5"/><path d="M4 19h17"/><path d="M8 16v-5"/><path d="M13 16V8"/><path d="M18 16v-9"/></svg></div><div><div class="dc-metric-label">累計支援プロジェクト数</div><div><span class="dc-metric-value" data-count="620" data-plus="true">620+</span><span class="dc-metric-unit">件</span></div></div><p class="dc-metric-desc">幅広い分野での支援実績を積み重ね</p></article>
          <article class="dc-metric-card dc-reveal" data-delay="4" data-index="04"><div class="dc-metric-icon"><svg viewBox="0 0 24 24"><circle cx="8" cy="8" r="3"/><circle cx="17" cy="8" r="2.4"/><path d="M2.5 20a5.5 5.5 0 0 1 11 0"/><path d="M14.5 19.5a4.5 4.5 0 0 1 7 0"/></svg></div><div><div class="dc-metric-label">関わる人の数</div><div><span class="dc-metric-value" data-count="120000" data-plus="true">120,000+</span><span class="dc-metric-unit">人</span></div></div><p class="dc-metric-desc">多くの人の未来に、つながる支援を</p></article>
        </div>
        <p class="dc-note">※数値はConnect Group関連事業における累計実績です。</p>
      </div>
    </section>

    <section class="dc-section dc-economy" id="economy">
      <div class="dc-container dc-center">
        <div class="dc-eyebrow dc-reveal">Connect Economy</div>
        <h2 class="dc-section-title dc-reveal" data-delay="1">Connect Economy / コネクト経済圏</h2>
        <p class="dc-section-lead dc-reveal" data-delay="2">医療・教育・金融・住環境・人財・地域産業をつなぎ、地域と社会の未来を創造します。</p>
      </div>
      <div class="dc-container">
        <div class="dc-economy-stage dc-reveal" data-delay="3">
          <div class="dc-economy-bg">
            <svg class="dc-dragon-economy-bg" viewBox="0 0 1000 720" aria-hidden="true">
                    <defs>
                <linearGradient id="dcDragonGradient" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#0A8C3A"/><stop offset=".48" stop-color="#00A896"/><stop offset="1" stop-color="#8BC34A"/></linearGradient>
                    </defs>
              <path class="dc-dragon-path dc-dragon-path--base" data-dragon-path pathLength="1"></path>
              <path class="dc-dragon-path dc-dragon-path--flow" data-dragon-path pathLength="1"></path>
            </svg>
          </div>
          <div class="dc-orbit" aria-hidden="true"></div>
          <svg class="dc-econ-line" viewBox="0 0 1040 540" aria-hidden="true">
            <path d="M255 168 C355 130 435 160 520 270"/><path d="M395 132 C446 165 485 200 520 270"/><path d="M650 132 C604 168 558 206 520 270"/><path d="M815 168 C706 146 610 178 520 270"/><path d="M255 372 C352 408 438 382 520 270"/><path d="M400 416 C460 380 493 336 520 270"/><path d="M644 416 C604 378 558 336 520 270"/><path d="M815 372 C700 406 605 380 520 270"/>
          </svg>
          <div class="dc-econ-item" style="--x:8%;--y:24%;--c:#10a85a;--mx:27%;--my:21%;"><div class="dc-econ-bubble"><svg viewBox="0 0 24 24"><path d="M12 21s-8-4.8-8-11a4.8 4.8 0 0 1 8-3.5A4.8 4.8 0 0 1 20 10c0 6.2-8 11-8 11Z"/><path d="M12 8v6"/><path d="M9 11h6"/></svg></div><div class="dc-econ-title">医療・ヘルスケア</div></div>
<div class="dc-econ-item" style="--x:28%;--y:24%;--c:#2b80e5;--mx:50%;--my:15%;"><div class="dc-econ-bubble"><svg viewBox="0 0 24 24"><path d="M3 8l9-4 9 4-9 4-9-4Z"/><path d="M6 10v5c2.5 2 9.5 2 12 0v-5"/><path d="M21 8v7"/></svg></div><div class="dc-econ-title">教育・人材育成</div></div>
<div class="dc-econ-item" style="--x:60%;--y:24%;--c:#ff9d16;--mx:73%;--my:21%;"><div class="dc-econ-bubble"><svg viewBox="0 0 24 24"><path d="M4 18h16"/><path d="M7 18V9"/><path d="M12 18V5"/><path d="M17 18v-7"/><path d="M5 12l7-7 3.4 3.4L20 4"/></svg></div><div class="dc-econ-title">金融・資金支援</div></div>
<div class="dc-econ-item" style="--x:82%;--y:24%;--c:#287fe0;--mx:85%;--my:46%;"><div class="dc-econ-bubble"><svg viewBox="0 0 24 24"><path d="M3 11.5 12 4l9 7.5"/><path d="M6 10.8V20h12v-9.2"/><path d="M10 20v-6h4v6"/></svg></div><div class="dc-econ-title">住宅・不動産</div></div>
<div class="dc-econ-item" style="--x:8%;--y:76%;--c:#80b91e;--mx:15%;--my:46%;"><div class="dc-econ-bubble"><svg viewBox="0 0 24 24"><path d="M20 4c-8 0-13 4.5-13 11a5 5 0 0 0 5 5c6.5 0 9-7 8-16Z"/><path d="M5 20c3-6 7-9 13-12"/></svg></div><div class="dc-econ-title">農業・食・地域創生</div></div>
<div class="dc-econ-item" style="--x:28%;--y:76%;--c:#8b5cf6;--mx:27%;--my:79%;"><div class="dc-econ-bubble"><svg viewBox="0 0 24 24"><path d="M12 3a7 7 0 0 0-7 7v2.2L3.5 15H6v3a2 2 0 0 0 2 2h3v-4"/><path d="M14 20v-4h2a5 5 0 0 0 0-10"/><path d="M10 9h.01"/><path d="M14 9h.01"/><path d="M10 13c1.5 1 3.5 1 5 0"/></svg></div><div class="dc-econ-title">AI・テクノロジー</div></div>
<div class="dc-econ-item" style="--x:60%;--y:76%;--c:#f5a400;--mx:50%;--my:85%;"><div class="dc-econ-bubble"><svg viewBox="0 0 24 24"><path d="M4 5.5A3.5 3.5 0 0 1 7.5 2H20v17H7.5A3.5 3.5 0 0 0 4 22V5.5Z"/><path d="M4 19a3.5 3.5 0 0 1 3.5-3.5H20"/></svg></div><div class="dc-econ-title">出版・メディア</div></div>
<div class="dc-econ-item" style="--x:82%;--y:76%;--c:#00a2b2;--mx:73%;--my:79%;"><div class="dc-econ-bubble"><svg viewBox="0 0 24 24"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M14.5 19a4.5 4.5 0 0 1 7 0"/></svg></div><div class="dc-econ-title">コミュニティ・<br>プラットフォーム</div></div>

          <div class="dc-economy-center"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'g'%20x1%3D'0'%20x2%3D'1'%20y1%3D'0'%20y2%3D'1'%3E%3Cstop%20stop-color%3D'%230A8C3A'%2F%3E%3Cstop%20offset%3D'.48'%20stop-color%3D'%2300A896'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238BC34A'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'15'%20fill%3D'none'%20stroke%3D'url(%23g)'%20stroke-width%3D'2.5'%2F%3E%3Cpath%20d%3D'M12%2020%20L18%2014%20L22%2026%20L28%2020'%20fill%3D'none'%20stroke%3D'url(%23g)'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E" alt="CONNECT GROUP"><strong>Connect<br>Economy</strong><span>コネクト経済圏</span></div>
        </div>
      </div>
    </section>

    <section class="dc-section dc-services" id="services">
      <div class="dc-container dc-center">
        <div class="dc-eyebrow dc-reveal">Service Portfolio</div>
        <h2 class="dc-section-title dc-reveal" data-delay="1">事業一覧</h2>
        <p class="dc-section-lead dc-reveal" data-delay="2">多様な事業を通じて、地域と企業の成長を支援します。</p>
        <div class="dc-service-grid">
          
      <a class="dc-service-card dc-reveal" data-delay="0" href="/business/" aria-label="コネクト コンサルティングの詳細を見る">
        <div class="dc-service-visual" style="background-image:url('https://images.unsplash.com/photo-1559523161-0fc0d8b38a7a?w=640&h=400&fit=crop&q=80')"></div>
        <div class="dc-service-body"><h3>コネクト<br>コンサルティング</h3><p>経営課題の整理から成長戦略の実行まで、専門家が伴走支援します。</p></div>
        <span class="dc-card-arrow" aria-hidden="true">→</span>
      </a>
      <a class="dc-service-card dc-reveal" data-delay="1" href="/business/" aria-label="連邦経営事業の詳細を見る">
        <div class="dc-service-visual" style="background-image:url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=640&h=400&fit=crop&q=80')"></div>
        <div class="dc-service-body"><h3>連邦経営事業</h3><p>地域と企業の連携を強化し、持続可能な事業モデルを共創します。</p></div>
        <span class="dc-card-arrow" aria-hidden="true">→</span>
      </a>
      <a class="dc-service-card dc-reveal" data-delay="2" href="/business/" aria-label="オンラインカレッジの詳細を見る">
        <div class="dc-service-visual" style="background-image:url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=640&h=400&fit=crop&q=80')"></div>
        <div class="dc-service-body"><h3>オンラインカレッジ</h3><p>学びと実践をつなぐオンライン教育で、人材育成を支援します。</p></div>
        <span class="dc-card-arrow" aria-hidden="true">→</span>
      </a>
      <a class="dc-service-card dc-reveal" data-delay="3" href="/business/" aria-label="マッチング事業の詳細を見る">
        <div class="dc-service-visual" style="background-image:url('https://images.unsplash.com/photo-1542601906-cdf28d1f7b8a?w=640&h=400&fit=crop&q=80')"></div>
        <div class="dc-service-body"><h3>マッチング事業</h3><p>人・企業・専門家をつなぎ、新たな価値とビジネスチャンスを創出します。</p></div>
        <span class="dc-card-arrow" aria-hidden="true">→</span>
      </a>
      <a class="dc-service-card dc-reveal" data-delay="0" href="/business/" aria-label="資金コネクトの詳細を見る">
        <div class="dc-service-visual" style="background-image:url('https://images.unsplash.com/photo-1559526324-4b87b5e36e44?w=640&h=400&fit=crop&q=80')"></div>
        <div class="dc-service-body"><h3>資金コネクト</h3><p>資金調達や投資支援で、企業の成長と挑戦をサポートします。</p></div>
        <span class="dc-card-arrow" aria-hidden="true">→</span>
      </a>
      <a class="dc-service-card dc-reveal" data-delay="1" href="/business/" aria-label="ファームコネクトの詳細を見る">
        <div class="dc-service-visual" style="background-image:url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=640&h=400&fit=crop&q=80')"></div>
        <div class="dc-service-body"><h3>ファームコネクト</h3><p>農業の課題解決と生産者の価値向上を支援します。</p></div>
        <span class="dc-card-arrow" aria-hidden="true">→</span>
      </a>
      <a class="dc-service-card dc-reveal" data-delay="2" href="/business/" aria-label="オーシャンコネクトの詳細を見る">
        <div class="dc-service-visual" style="background-image:url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=640&h=400&fit=crop&q=80')"></div>
        <div class="dc-service-body"><h3>オーシャンコネクト</h3><p>水産・海洋資源の活用と持続可能な産業づくりを支援します。</p></div>
        <span class="dc-card-arrow" aria-hidden="true">→</span>
      </a>
      <a class="dc-service-card dc-reveal" data-delay="3" href="/business/" aria-label="チャットサービスの詳細を見る">
        <div class="dc-service-visual" style="background-image:url('https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=640&h=400&fit=crop&q=80')"></div>
        <div class="dc-service-body"><h3>チャットサービス</h3><p>専門家とつながるチャット相談で、現場課題をすばやく解決します。</p></div>
        <span class="dc-card-arrow" aria-hidden="true">→</span>
      </a>
        </div>
        <div class="dc-service-more dc-reveal"><a class="dc-btn dc-btn--ghost" href="/business/"><span>すべての事業を見る</span><span class="dc-btn__arrow">→</span></a></div>
      </div>
    </section>

    <section class="dc-cta" id="contact">
      <div class="dc-container">
        <div class="dc-cta-card dc-reveal">
          <div class="dc-cta-copy">
            <h2>ともに、コネクト経済圏を広げましょう。</h2>
            <p>まずはお気軽にご相談ください。</p>
            <a class="dc-btn dc-btn--primary" href="/contact/"><span>無料相談する</span><span class="dc-btn__arrow">→</span></a>
          </div>
          <div class="dc-cta-photo" aria-hidden="true"></div>
          <div class="dc-cta-menu">
            <a href="/contact/"><span class="dc-cta-icon">経</span>経営の相談</a>
            <a href="/contact/"><span class="dc-cta-icon">人</span>人材育成の相談</a>
            <a href="/contact/"><span class="dc-cta-icon">資</span>資金調達の相談</a>
            <a href="/contact/"><span class="dc-cta-icon">医</span>医療・地域の相談</a>
            <a href="/contact/"><span class="dc-cta-icon">連</span>事業連携の相談</a>
            <a href="/contact/"><span class="dc-cta-icon">他</span>その他の相談</a>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="dc-footer">
    <div class="dc-footer__inner">
      <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20280%2080'%3E%3Cg%20transform%3D'translate(8%2014)'%3E%3Ccircle%20cx%3D'26'%20cy%3D'26'%20r%3D'19'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'3.2'%2F%3E%3Cpath%20d%3D'M16%2026%20L22%2017%20L28%2034%20L36%2026'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'3.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fg%3E%3Ctext%20x%3D'68'%20y%3D'34'%20font-family%3D'-apple-system%2CBlinkMacSystemFont%2Csans-serif'%20font-weight%3D'800'%20font-size%3D'22'%20fill%3D'%23fff'%3EConnect%20Group%3C%2Ftext%3E%3Ctext%20x%3D'70'%20y%3D'54'%20font-family%3D'-apple-system%2CBlinkMacSystemFont%2Csans-serif'%20font-weight%3D'700'%20font-size%3D'10'%20fill%3D'%23d7f4e4'%20letter-spacing%3D'2'%3EDRAGON%20CONNECT%3C%2Ftext%3E%3C%2Fsvg%3E" alt="CONNECT GROUP - connect management -">
      <p>つなぐ力で、未来を創る。<br>© CONNECT GROUP / Dragon Connect</p>
    </div>
  </footer>
  <a class="dc-page-top" href="#top" data-page-top aria-label="ページ上部へ">↑</a>
</div>

<script>

(() => {
  const header = document.querySelector('[data-header]');
  const pageTop = document.querySelector('[data-page-top]');
  const menuBtn = document.querySelector('[data-menu]');
  const nav = document.querySelector('[data-nav]');
  const parallax = document.querySelector('[data-parallax]');
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const onScroll = () => {
    const y = window.scrollY || document.documentElement.scrollTop;
    header?.classList.toggle('is-scrolled', y > 24);
    pageTop?.classList.toggle('is-visible', y > 640);
  };
  onScroll();
  window.addEventListener('scroll', onScroll, { passive: true });

  menuBtn?.addEventListener('click', () => {
    menuBtn.classList.toggle('is-open');
    nav?.classList.toggle('is-open');
    document.body.classList.toggle('is-locked', nav?.classList.contains('is-open'));
  });
  nav?.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {
    menuBtn?.classList.remove('is-open');
    nav?.classList.remove('is-open');
    document.body.classList.remove('is-locked');
  }));

  const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        revealObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.13, rootMargin: '0px 0px -8% 0px' });
  document.querySelectorAll('.dc-reveal').forEach(el => revealObserver.observe(el));

  const easeOut = t => 1 - Math.pow(1 - t, 3);
  const format = num => Math.round(num).toLocaleString('ja-JP');
  const runCounter = (el) => {
    if (el.dataset.done) return;
    el.dataset.done = 'true';
    const target = Number(el.dataset.count || 0);
    const plus = el.dataset.plus === 'true' ? '+' : '';
    const start = performance.now();
    const duration = target > 10000 ? 1800 : 1450;
    const tick = now => {
      const t = Math.min(1, (now - start) / duration);
      el.textContent = format(target * easeOut(t)) + (t >= 1 ? plus : '');
      if (t < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  };
  const counterObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.querySelectorAll('[data-count]').forEach(runCounter);
        counterObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.35 });
  document.querySelectorAll('[data-counter-root]').forEach(el => counterObserver.observe(el));

  if (parallax && !prefersReduced) {
    let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
    window.addEventListener('mousemove', (e) => {
      const rect = parallax.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      targetX = (e.clientX - cx) / rect.width;
      targetY = (e.clientY - cy) / rect.height;
    }, { passive: true });
    const animate = () => {
      currentX += (targetX - currentX) * 0.06;
      currentY += (targetY - currentY) * 0.06;
      parallax.style.transform = `rotateX(${(-currentY * 4).toFixed(2)}deg) rotateY(${(currentX * 5).toFixed(2)}deg) translate3d(0,0,0)`;
      requestAnimationFrame(animate);
    };
    animate();
  }

  const buildDragonCurveMotif = () => {
    const pathTargets = document.querySelectorAll('[data-dragon-path]');
    if (!pathTargets.length) return;

    const iterations = 10;
    let directions = [0];
    for (let i = 0; i < iterations; i++) {
      const reversed = directions.slice().reverse().map(d => (d + 1) % 4);
      directions = directions.concat(reversed);
    }

    const vectors = [[1,0],[0,1],[-1,0],[0,-1]];
    let x = 0, y = 0;
    const raw = [{ x, y }];
    directions.forEach(d => {
      x += vectors[d][0];
      y += vectors[d][1];
      raw.push({ x, y });
    });

    const minX = Math.min(...raw.map(p => p.x));
    const maxX = Math.max(...raw.map(p => p.x));
    const minY = Math.min(...raw.map(p => p.y));
    const maxY = Math.max(...raw.map(p => p.y));
    const width = maxX - minX || 1;
    const height = maxY - minY || 1;
    const viewW = 1000, viewH = 720, pad = 82;
    const scale = Math.min((viewW - pad * 2) / width, (viewH - pad * 2) / height);
    const offsetX = (viewW - width * scale) / 2;
    const offsetY = (viewH - height * scale) / 2;
    const points = raw.map(p => ({
      x: offsetX + (p.x - minX) * scale,
      y: offsetY + (p.y - minY) * scale
    }));
    const d = points.map((p, i) => `${i ? 'L' : 'M'}${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ');

    pathTargets.forEach(path => path.setAttribute('d', d));

    document.querySelectorAll('[data-dragon-nodes]').forEach(group => {
      group.innerHTML = '';
      const samples = [0.02, 0.12, 0.24, 0.38, 0.52, 0.66, 0.80, 0.94];
      samples.forEach((ratio, idx) => {
        const p = points[Math.min(points.length - 1, Math.max(0, Math.round((points.length - 1) * ratio)))];
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', p.x.toFixed(1));
        circle.setAttribute('cy', p.y.toFixed(1));
        circle.setAttribute('r', idx % 3 === 0 ? '13' : '10');
        circle.style.animationDelay = `${idx * 0.18}s`;
        group.appendChild(circle);
      });
    });
  };
  buildDragonCurveMotif();

})();

</script>
</div>
<!-- END CONNECT GROUP ABOUT PAGE -->
