@charset "utf-8";

/*============================
#topMainVisual
============================*/

#topMainVisual { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 40rem; padding: 6.5rem 0 2.5rem; background: var(--color-navyDeep); color: var(--color-white); }
#topMainVisual .bg { position: absolute; inset: 0; overflow: hidden; }
#topMainVisual .bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: linear-gradient(90deg, var(--color-black) 0%, transparent 70%); mask-image: linear-gradient(90deg, var(--color-black) 0%, transparent 70%); pointer-events: none; }
#topMainVisual .bg::after { content: ""; position: absolute; left: -10%; bottom: -40%; z-index: 1; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(rgba(51, 170, 221, .28), transparent 65%); pointer-events: none; }
#topMainVisual .photo { position: absolute; inset: 0; }
#topMainVisual .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 26, 58, .94) 0%, rgba(18, 26, 58, .78) 38%, rgba(18, 26, 58, .25) 75%, rgba(18, 26, 58, .1) 100%), linear-gradient(0deg, rgba(18, 26, 58, .55) 0%, transparent 35%); }
#topMainVisual .photo .image { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; animation: mvZoom 24s ease-in-out infinite alternate; }
#topMainVisual .grid { position: absolute; inset: 0; z-index: 1; -webkit-mask-image: linear-gradient(90deg, var(--color-black) 0%, transparent 75%); mask-image: linear-gradient(90deg, var(--color-black) 0%, transparent 75%); pointer-events: none; }
#topMainVisual .glow { position: absolute; inset: 0; background-image: linear-gradient(rgba(127, 200, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 200, 255, .7) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(closest-side, var(--color-black), transparent); mask-image: radial-gradient(closest-side, var(--color-black), transparent); -webkit-mask-size: 36rem 36rem; mask-size: 36rem 36rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 0; animation: gridGlow 16s ease-in-out infinite; }
@keyframes mvZoom {
0% { transform: scale(1); }
100% { transform: scale(1.12); }
}
@keyframes gridGlow {
0% { -webkit-mask-position: 0% 20%; mask-position: 0% 20%; opacity: 0; }
12% { opacity: .9; }
38% { -webkit-mask-position: 45% 75%; mask-position: 45% 75%; opacity: .9; }
50% { -webkit-mask-position: 55% 85%; mask-position: 55% 85%; opacity: 0; }
51% { -webkit-mask-position: 60% 10%; mask-position: 60% 10%; opacity: 0; }
63% { opacity: .9; }
88% { -webkit-mask-position: 5% 70%; mask-position: 5% 70%; opacity: .9; }
100% { -webkit-mask-position: 0% 80%; mask-position: 0% 80%; opacity: 0; }
}
#topMainVisual .inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); width: 100%; }
#topMainVisual .copy { width: auto; }
#topMainVisual .title { width: min(100%, 31rem); margin-top: 0; line-height: 1; }
#topMainVisual .title .image { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35)); }
#topMainVisual .en { margin-top: .875rem; font-family: Inter, sans-serif; font-size: var(--fs-md); font-weight: 500; letter-spacing: .04em; color: var(--color-blueLight); }
#topMainVisual .lead { margin-top: 1.25rem; font-size: var(--fs-lg); line-height: 1.9; color: var(--color-textOnBlue); }
#topMainVisual .buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; translate: 0 1.25rem; }
#topMainVisual .md_btn { justify-content: center; min-width: 13.5rem; padding: .875rem 1.75rem; font-size: var(--fs-base); }
#topMainVisual .md_btn_line { transition: background-color .25s, color .25s; }
#topMainVisual .md_btn_line:hover { background: var(--color-white); color: var(--color-navy); }
#topMainVisual .brand { position: relative; display: flex; align-items: center; align-self: stretch; padding-left: clamp(2.5rem, 5vw, 5rem); border-left: 1px solid rgba(255, 255, 255, .22); }
#topMainVisual .brandLogo { display: block; width: clamp(9.75rem, 15.4vw, 14.75rem); height: auto; overflow: visible; filter: drop-shadow(0 6px 24px rgba(5, 12, 32, .5)); }
#topMainVisual .brandMain, #topMainVisual .brandSub { fill: var(--color-white); }
#topMainVisual .brandSub { opacity: .85; }
#topMainVisual .scroll { position: absolute; right: calc(max(0px, (100% - var(--container-width)) / 2) + clamp(1.25rem, 4vw, 3.5rem)); bottom: 0; z-index: 3; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: .875rem; font-family: "Barlow Condensed", Inter, sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--color-white); text-decoration: none; transition: opacity .25s; }
#topMainVisual .scroll:hover { opacity: .6; }
#topMainVisual .scroll .text { writing-mode: vertical-rl; }
#topMainVisual .scroll .line { position: relative; display: block; width: 1px; height: 9rem; overflow: hidden; background: rgba(255, 255, 255, .22); }
#topMainVisual .scroll .line::after { content: ""; position: absolute; top: -40%; left: 0; width: 1px; height: 40%; background: linear-gradient(transparent, var(--color-white)); animation: scrollLine 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes scrollLine {
0% { top: -40%; }
75% { top: 100%; }
100% { top: 100%; }
}

/* 背景として大きな「agex」を置き、文字の中に別の写真を見せる */
#topMainVisual .wmFrame { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#topMainVisual .wordmark { --edge: calc(max(0px, (100% - var(--container-width)) / 2) + clamp(1.25rem, 4vw, 3.5rem)); position: absolute; right: calc(var(--edge) + 2.5rem); top: calc(58% - 1.25rem); z-index: 1; translate: 0 calc(-50% + .15em); font-family: "Century Gothic", CenturyGothic, "URW Gothic", AppleGothic, sans-serif; font-size: clamp(10rem, 13vw, 13rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; padding-bottom: .3em; white-space: nowrap; color: transparent; background: center 60% / cover no-repeat; -webkit-background-clip: text; background-clip: text; opacity: .92; pointer-events: none; user-select: none; }
/* A：右上に特大で配置し、グローバルナビにかかるまで上へはみ出す */
#topMainVisual.isWmA .wmFrame { top: calc(-1 * var(--header-height)); }
#topMainVisual.isWmA .wordmark { top: calc(-.2em - 1.25rem); right: -.08em; translate: none; font-size: clamp(15rem, 27vw, 29rem); opacity: .6; }
/* B：右側に大きく、左の文字の後ろまで重ねて薄く見せる */
#topMainVisual.isWmB .wordmark { top: calc(54% - 1.25rem); right: calc(var(--edge) - 7.5rem); font-size: clamp(14rem, 22vw, 24rem); opacity: .5; }
@media screen and (max-width: 1180px) {
#topMainVisual:not([class*="isWm"]) .wordmark { font-size: 9.25rem; }
}
@media screen and (max-width: 640px) {
/* SPでは、コピーの上の余白に右寄せで置く */
#topMainVisual .wmFrame, #topMainVisual.isWmA .wmFrame { top: 0; }
#topMainVisual .wordmark, #topMainVisual:not([class*="isWm"]) .wordmark, #topMainVisual.isWmA .wordmark, #topMainVisual.isWmB .wordmark { top: -.12em; right: -.06em; translate: none; font-size: 38vw; opacity: .55; }
}

/*============================
#topAbout
============================*/

#topAbout { padding: 5.125rem 0; background: var(--color-white); border-bottom: 1px solid var(--color-border); }
#topAbout .text { font-size: clamp(1.0625rem,1.5vw,1.25rem); font-weight: 700; line-height: 2; letter-spacing: .04em; color: var(--color-text); text-align: center; }

/*============================
#topService
============================*/

#topService .head .lead, #topService .card .text { color: var(--color-textSub); }
#topService { padding: 7.5rem 0; }
#topService .label { font-family: Inter,sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: .2em; color: var(--color-blue); display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
#topService .label::before { content: ""; width: 24px; height: 3px; background: var(--grad-main); }
#topService .title { font-weight: 500; font-size: clamp(1.625rem,3.4vw,2.5rem); line-height: 1.5; letter-spacing: .08em; }
#topService .heading { font-size: 1.1875rem; font-weight: 700; line-height: 1.65; letter-spacing: .06em; }
#topService .lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 2.1; max-width: 40em; }
#topService .head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(2rem,6vw,6rem); align-items: start; }
#topService .head .title { white-space: nowrap; }
#topService .head .lead { margin: .5em 0 0; max-width: 34em; justify-self: end; border-left: 3px solid transparent; border-image: var(--grad-main) 1; padding-left: 1.5rem; }
#topService .list { margin-top: 3rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
#topService .card { background: var(--color-white); border: 1px solid var(--color-border); padding: 2rem 1.75rem 1.875rem; position: relative; }
#topService .card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--grad-main); }
#topService .card .heading { margin-top: 1rem; }
#topService .card .text { margin-top: 0.75rem; font-size: 1rem; line-height: 2; }
#topService .list .card { text-align: center; padding: 2.5rem 1.875rem 2.125rem; }
#topService .icon { width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; background: var(--color-sky); display: flex; align-items: center; justify-content: center; color: var(--color-blueDark); }
#topService .icon .graphic { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#topService .list .card:nth-child(3) .icon { background: var(--grad-main); color: var(--color-white); }
#topService .list .card .heading { margin-top: 1.25rem; }
#topService { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%235566DD' stroke-opacity='.10' stroke-width='1'><path d='M28 0L56 16.2V48.5L28 64.7L0 48.5V16.2Z'/><path d='M28 64.7V97M0 48.5L-28 64.7M56 48.5L84 64.7'/><path d='M0 16.2L28 32.3L56 16.2M28 32.3V64.7'/></g></svg>") 0 0/56px 97px repeat,var(--grad-soft); }
#topService .list .card { background: var(--color-white); }
#topService .list .card:nth-child(3) { border: 2px solid transparent; background: linear-gradient(var(--color-white),var(--color-white)) padding-box,var(--grad-main) border-box; box-shadow: 0 14px 32px -16px rgba(85,102,221,.45); }
#topService .list .card:nth-child(3)::before { height: 6px; }
#topService .list .card:nth-child(3) .heading { color: var(--color-blueDark); }
#topService .subTitle { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 4.5rem; padding: 0.75rem 1.75rem 0.75rem 1.375rem; background: var(--color-white); border-radius: 999px; font-size: 1.1875rem; font-weight: 500; letter-spacing: .08em; line-height: 1.4; box-shadow: 0 10px 26px -14px rgba(60,80,160,.35); }
#topService .subTitle::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grad-main); flex: none; }
#topService .themes { position: relative; margin-top: 0.25rem; }
#topService .theme { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 50%; transition: transform .35s cubic-bezier(.3,1.4,.5,1); animation: bob 6s ease-in-out infinite; }
#topService .theme:hover { transform: scale(1.06) rotate(-2deg); z-index: 5; }
#topService .theme .name { display: block; font-size: 1.0625rem; letter-spacing: .04em; line-height: 1.5; }
#topService .theme .desc { display: block; margin-top: 0.5rem; font-size: 0.78125rem; line-height: 1.75; }
#topService .theme:nth-child(1) { background: var(--grad-main); color: var(--color-white); z-index: 2; }
#topService .theme:nth-child(1) .desc { color: var(--color-textOnGrad); }
#topService .theme:nth-child(2) { background: var(--color-white); box-shadow: 0 10px 30px -14px rgba(60,80,160,.35); animation-delay: -1.5s; z-index: 3; }
#topService .theme:nth-child(3) { background: var(--color-white); border: 2px dashed var(--color-blue); animation-delay: -3s; z-index: 1; }
#topService .theme:nth-child(4) { background: var(--color-yellow); color: var(--color-text); box-shadow: 0 14px 34px -14px rgba(200,150,20,.55); animation-delay: -4.5s; z-index: 2; }
#topService .theme:nth-child(5) { background: var(--color-white); color: var(--color-text); box-shadow: 0 10px 30px -14px rgba(60,80,160,.35); animation-delay: -2.2s; z-index: 3; }
#topService .theme:nth-child(n + 2) .desc { color: var(--color-textSub); }
#topService .theme:nth-child(4) .desc { color: var(--color-textOnYellow); }
#topService .theme:nth-child(1) .name::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto 0.625rem; border-radius: 50%; background: var(--color-yellow); }
@keyframes bob {
0%,100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
@media (prefers-reduced-motion:reduce) {
#topService .theme { animation: none; }
}
#topService .note { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--color-textFaint); }
#topService .phase { display: grid; grid-template-rows: auto 1.125rem auto auto; margin-top: 2.5rem; }
#topService .phase .steps { display: grid; grid-row: 3; grid-template-columns: repeat(4,1fr); position: relative; gap: 0.375rem; margin-top: 0.375rem; }
#topService .phase .steps .step { text-align: center; font-weight: 700; color: var(--color-white); clip-path: polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%); }
#topService .phase .steps .step:nth-child(1) { background: var(--color-blueLight); clip-path: polygon(0 0,92% 0,100% 50%,92% 100%,0 100%); }
#topService .phase .steps .step:nth-child(2) { background: var(--color-stepBlue2); }
#topService .phase .steps .step:nth-child(3) { background: var(--color-stepBlue3); }
#topService .phase .steps .step:nth-child(4) { background: var(--color-indigo); }
#topService .phase .entry { position: relative; grid-row: 1; grid-column: 1; text-align: center; }
#topService .phase .entry .entryText { position: relative; z-index: 1; display: inline-block; background: var(--color-yellow); color: var(--color-text); font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em; padding: 0.3125rem 1.125rem; border-radius: 999px; }
#topService .phase .entry::before, #topService .phase .entry::after { content: ""; position: absolute; top: 50%; }
#topService .phase .entry::before { left: 12.5%; right: 50%; }
#topService .phase .entry::after { left: 50%; right: 12.5%; }
#topService .phase .drops { display: grid; grid-template-columns: repeat(4,1fr); height: 36px; }
#topService .phase .drops .drop { position: relative; }
#topService .phase .drops .drop::before { content: ""; position: absolute; top: 0; bottom: 6px; }
#topService .phase .drops .drop::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: 0; border: 6px solid transparent; }
#topService .phase .caption { grid-row: 4; text-align: center; color: var(--color-textSub); }
#topService .more { margin-top: 3rem; text-align: center; }
#topService .more .md_btn { padding: 1rem 2.5rem; font-size: 0.9375rem; transition: transform .25s,box-shadow .25s,filter .25s,background-color .25s; }
#topService .more .md_btn .arrow { display: inline-block; transition: transform .25s; }
#topService .more .md_btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 24px -10px rgba(60,90,220,.6); }
#topService .more .md_btn:hover .arrow { transform: translateX(5px); }
#topService { position: relative; overflow: hidden; }
#topService > .md_container { position: relative; z-index: 1; }
#topService .deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
#topService .deco .circle { position: absolute; overflow: visible; }
#topService .deco .ring { fill: none; stroke: var(--color-white); stroke-width: 38; opacity: .85; }
#topService .deco .ring.mini { stroke-width: 18; opacity: .9; }
#topService .deco .arc { fill: none; stroke-width: 38; stroke-linecap: round; transform-origin: center; transform: rotate(-90deg); }
#topService .deco .arc.mini { stroke-width: 18; }
#topService .deco .arcBlue { stroke: var(--color-arcBlue); opacity: .55; }
#topService .deco .arcSky { stroke: var(--color-blueLight); opacity: .35; }
#topService .deco .arcYellow { stroke: var(--color-yellow); opacity: .75; }
#topService .deco .orbit { fill: none; stroke-dasharray: 2 10; stroke-linecap: round; }
#topService .deco .dot { fill: var(--color-yellow); r: 6px; }
#topService .deco .circle01 { width: 560px; right: -230px; top: -170px; animation: dnspin 60s linear infinite; }
#topService .deco .circle02 { width: 440px; left: -170px; top: 46%; animation: dnspin 80s linear infinite reverse; }
#topService .deco .circle03 { width: 620px; left: calc(50% - 19.375rem); top: 41%; animation: dnspin 40s linear infinite; }
#topService .deco .circle04 { width: 110px; left: 9%; top: 6%; animation: dnfloat 9s ease-in-out infinite; }
#topService .deco .circle05 { width: 150px; right: 6%; bottom: 9%; animation: dnfloat 11s ease-in-out -3s infinite,dnspin 30s linear infinite; }
#topService .deco .circle06 { width: 70px; left: 46%; top: 2%; animation: dnfloat 7s ease-in-out -2s infinite; }
@keyframes dnspin {
to { transform: rotate(360deg); }
}
@keyframes dnfloat {
50% { translate: 0 -18px; }
}
#topService .list .card { box-shadow: 0 24px 48px -32px rgba(40,70,150,.45); }
#topService .themes .tag { position: absolute; aspect-ratio: 1; border-radius: 50%; background: var(--color-white); box-shadow: 0 10px 22px -14px rgba(40,70,150,.45); display: flex; align-items: center; justify-content: center; font-style: normal; animation: bob 6s ease-in-out var(--dl) infinite; z-index: 0; }
#topService .themes .tag .tagText { font-size: 0.65625rem; letter-spacing: -.02em; font-weight: 700; color: var(--color-textFaint); white-space: nowrap; line-height: 1; }
#topService .themes .tag:nth-of-type(5n) { background: rgba(255,255,255,.7); }
#topService .phase { position: relative; z-index: 1; padding: 2.75rem max(clamp(1.25rem,4vw,3.5rem),calc((100% - var(--container-width))/2 + clamp(1.25rem,4vw,3.5rem))) 2.25rem; }
#topService .phase .steps .step { position: relative; overflow: hidden; padding: 1.25rem 0.625rem; font-size: 1rem; animation: phpulse 4.8s ease-in-out infinite; }
#topService .phase .steps .step:nth-child(2) { animation-delay: .6s; }
#topService .phase .steps .step:nth-child(3) { animation-delay: 1.2s; }
#topService .phase .steps .step:nth-child(4) { animation-delay: 1.8s; }
#topService .phase .steps .step::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform: skewX(-20deg); animation: phsweep 4.8s ease-in-out infinite; }
#topService .phase .steps .step:nth-child(2)::after { animation-delay: .6s; }
#topService .phase .steps .step:nth-child(3)::after { animation-delay: 1.2s; }
#topService .phase .steps .step:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes phsweep {
0% { left: -40%; }
35%,100% { left: 120%; }
}
@keyframes phpulse {
0%,100% { filter: none; }
12% { filter: brightness(1.12); }
}
#topService .phase .drops .drop::before { border-left: 0; width: 2px; left: calc(50% - 1px); background: repeating-linear-gradient(var(--color-yellow) 0 5px,transparent 5px 9px); background-size: 2px 18px; animation: phdrop 1s linear infinite; }
@keyframes phdrop {
to { background-position: 0 18px; }
}
#topService .phase .entry::before, #topService .phase .entry::after { top: calc(50% - .0625rem); border-top: 0; height: 2px; background: repeating-linear-gradient(90deg,var(--color-yellow) 0 8px,transparent 8px 14px); background-size: 28px 2px; animation: phline 1.2s linear infinite; }
/* パネルから左右へ流れるように、左半分は逆向きに動かす */
#topService .phase .entry::before { animation-direction: reverse; }
@keyframes phline {
to { background-position: 28px 0; }
}
#topService .phase .entry .entryText { animation: phbadge 2.4s ease-in-out infinite; }
@keyframes phbadge {
50% { transform: translateY(-3px); box-shadow: 0 10px 18px -10px rgba(200,150,20,.7); }
}
#topService .phase .caption { font-size: 0.875rem; margin-top: 1.375rem; }
#topService .more .md_btn { min-width: 320px; justify-content: center; padding-left: 3.5rem; padding-right: 3.5rem; }
#topService .phase { background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 18%,rgba(255,255,255,.92) 82%,rgba(255,255,255,0) 100%); }
#topService .themes { height: clamp(360px,30vw,420px); }
#topService .theme:nth-child(1) { width: clamp(170px,16vw,236px); height: clamp(170px,16vw,236px); left: 0; top: clamp(50px,5vw,72px); }
#topService .theme:nth-child(2) { width: clamp(140px,12.5vw,186px); height: clamp(140px,12.5vw,186px); left: 21.5%; top: 0; }
#topService .theme:nth-child(3) { width: clamp(180px,17.5vw,260px); height: clamp(180px,17.5vw,260px); left: 39%; top: clamp(90px,8vw,120px); }
#topService .theme:nth-child(4) { width: clamp(150px,13.5vw,200px); height: clamp(150px,13.5vw,200px); left: 62.5%; top: 8px; }
#topService .theme:nth-child(5) { width: clamp(140px,12.5vw,184px); height: clamp(140px,12.5vw,184px); left: 81%; top: clamp(130px,11vw,160px); }
#topService .theme { padding: 0 clamp(0.875rem,1.6vw,1.75rem); }
#topService .deco { opacity: 1; }
#topService .deco .circle:not(.circle03) { opacity: .5; }
#topService .deco .circle03 { opacity: 1; }
#topService .deco .orbit { stroke: var(--color-white); stroke-width: 3; opacity: 1; }
#topService .themes .tag.tagSecurity { flex-direction: column; gap: 0.25rem; background: linear-gradient(145deg,var(--color-navy),var(--color-navyNight)); box-shadow: 0 0 0 4px rgba(51,170,221,.25),0 14px 28px -14px rgba(15,26,46,.7); z-index: 2; }
#topService .themes .tag.tagSecurity::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px dashed rgba(51,170,221,.6); animation: dnspin 18s linear infinite; }
#topService .themes .tag.tagSecurity .tagIcon { width: 26px; height: 26px; fill: none; stroke: var(--color-securityIcon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#topService .themes .tag.tagSecurity .tagText { color: var(--color-white); font-size: 0.71875rem; line-height: 1.35; text-align: center; white-space: normal; }

#topService .themes .tag.tag01 { left: -13%; top: 8%; width: 26px; --dl: -0.0s; }
#topService .themes .tag.tag02 { left: -8%; top: 62%; width: 44px; --dl: -0.7s; }
#topService .themes .tag.tag03 { left: -15%; top: 90%; width: 18px; --dl: -1.4s; }
#topService .themes .tag.tag04 { left: -4%; top: 30%; width: 14px; --dl: -2.1s; }
#topService .themes .tag.tag05 { left: 16%; top: 94%; width: 22px; --dl: -2.8s; }
#topService .themes .tag.tag06 { left: 33%; top: -6%; width: 18px; --dl: -3.5s; }
#topService .themes .tag.tag07 { left: 52%; top: 96%; width: 30px; --dl: -4.2s; }
#topService .themes .tag.tag08 { left: 50%; top: -2%; width: 62px; --dl: -4.9s; }
#topService .themes .tag.tag09 { left: 78%; top: 92%; width: 20px; --dl: -5.6s; }
#topService .themes .tag.tag10 { left: 102%; top: 46%; width: 22px; --dl: -6.3s; }
#topService .themes .tag.tag11 { left: 92%; top: -2%; width: 128px; --dl: -7.0s; }
#topService .themes .tag.tag12 { left: 110%; top: 84%; width: 30px; --dl: -7.7s; }
#topService .themes .tag.tag13 { left: 113%; top: 20%; width: 16px; --dl: -8.4s; }
#topService .themes .tag.tag14 { left: 97%; top: 70%; width: 40px; --dl: -9.1s; }
#topService .themes .tag.tag15 { left: -11%; top: 40%; width: 34px; --dl: -9.8s; }
@media screen and (min-width: 641px) {
#topService .phase .drops { grid-row: 1 / 3; grid-column: 1; align-self: end; }
#topService .phase .drops .drop::after { border-top: 7px solid var(--color-yellow); border-bottom: 0; }
}

/*============================
#topStrength
============================*/

#topStrength .head .lead, #topStrength .card .text { color: var(--color-textSub); }
#topStrength { padding: 7.5rem 0; padding-bottom: 4.5rem; }
#topStrength .label { font-family: Inter,sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: .2em; color: var(--color-blue); display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
#topStrength .label::before { content: ""; width: 24px; height: 3px; background: var(--grad-main); }
#topStrength .title { font-weight: 500; font-size: clamp(1.625rem,3.4vw,2.5rem); line-height: 1.5; letter-spacing: .08em; }
#topStrength .heading { font-size: 1.1875rem; font-weight: 700; line-height: 1.65; letter-spacing: .06em; }
#topStrength .lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 2.1; max-width: 40em; }
#topStrength .head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(2rem,6vw,6rem); align-items: start; }
#topStrength .head .title { white-space: nowrap; }
#topStrength .head .lead { margin: .5em 0 0; max-width: 34em; justify-self: end; border-left: 3px solid transparent; border-image: var(--grad-main) 1; padding-left: 1.5rem; }
#topStrength .list { display: grid; grid-template-columns: repeat(3,1fr); }
#topStrength .card { position: relative; --bg: var(--color-white); background: var(--bg); overflow: visible; padding: 2.5rem 2rem 2rem; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 18px 40px -24px rgba(40,70,150,.35); transition: transform .3s ease,box-shadow .3s ease; }
#topStrength .card .text { margin-top: 0.75rem; font-size: 1rem; line-height: 2; }
#topStrength .list { gap: 1.75rem; margin-top: 3.25rem; align-items: start; }
#topStrength .card::before { content: ""; position: absolute; left: 32px; top: 0; right: auto; width: 48px; height: 3px; background: var(--grad-main); border-radius: 0 0 3px 3px; }
#topStrength .card::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--bg); border: 1px solid var(--color-border); border-width: 0 1px 1px 0; bottom: -10px; left: 40px; transform: rotate(45deg); }
#topStrength .card:nth-child(2) { --bg: var(--color-cardPale); margin-top: 2rem; }
#topStrength .card:nth-child(2)::after { left: auto; right: 40px; }
#topStrength .card:nth-child(3) { margin-top: 1rem; }
#topStrength .card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(40,70,150,.45); }
#topStrength .card .num { display: inline-block; font-family: "Noto Sans JP",sans-serif; font-weight: 700; font-size: 0.8125rem; letter-spacing: .1em; line-height: 1; padding: 0.4375rem 0.75rem; background: var(--color-text); color: var(--color-white); -webkit-background-clip: border-box; background-clip: border-box; border-radius: 4px; }
#topStrength .card .heading { margin-top: 1.125rem; }
#topStrength { position: relative; overflow: hidden; }
#topStrength > .md_container { position: relative; z-index: 1; }

/*============================
#topCases
============================*/

#topCases .head .lead, #topCases .case .text { color: var(--color-textSub); }

#topCases { position: relative; padding: 7.5rem 0; }
#topCases .label { font-family: Inter,sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: .2em; color: var(--color-blue); display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
#topCases .label::before { content: ""; width: 24px; height: 3px; background: var(--grad-main); }
#topCases .title { font-weight: 500; font-size: clamp(1.625rem,3.4vw,2.5rem); line-height: 1.5; letter-spacing: .08em; }
#topCases .heading { font-size: 1.1875rem; font-weight: 700; line-height: 1.65; letter-spacing: .06em; }
#topCases .lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 2.1; max-width: 40em; }
#topCases .head { display: grid; gap: clamp(2rem,6vw,6rem); grid-template-columns: auto minmax(0,1fr) auto; align-items: start; }
#topCases .head .title { white-space: nowrap; }
#topCases .head .lead { margin: .5em 0 0; max-width: 34em; justify-self: end; border-left: 3px solid transparent; border-image: var(--grad-main) 1; padding-left: 1.5rem; }
#topCases .slider { --pad: max(clamp(20px,4vw,56px),calc((100% - var(--container-width))/2 + clamp(20px,4vw,56px))); --gap: 24px; margin-top: 3rem; overflow: hidden; padding: 0 0 0.25rem var(--pad); touch-action: pan-y; }
#topCases .track { display: flex; gap: var(--gap); will-change: transform; }
#topCases .track.isAnimating { transition: transform .7s cubic-bezier(.65,0,.35,1); }
#topCases .slider .case { flex: 0 0 clamp(300px,28vw,420px); }
#topCases .head .nav { align-self: center; }
#topCases .nav { display: flex; gap: 0.625rem; }
#topCases .nav .button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-blueDark); font-size: 1.125rem; cursor: pointer; transition: background .2s,color .2s; }
#topCases .nav .button:hover { background: var(--grad-main); color: var(--color-white); border-color: transparent; }
#topCases .dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.75rem; }
#topCases .dots .dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: var(--color-border); cursor: pointer; transition: width .3s,background .3s; }
#topCases .dots .dot.isOn { width: 28px; background: var(--grad-main); }
#topCases .case { position: relative; background: transparent; border-block: 1px solid var(--color-border); border-inline: 0; border-radius: 0; overflow: hidden; }
#topCases .case .photo { position: absolute; inset: 0; overflow: hidden; }
#topCases .case:hover .md_caseArt .graphic { transform: scale(1.04); }
#topCases .case .body { position: relative; z-index: 1; padding: 2.5rem 32% 2.25rem 2.25rem; }
#topCases .case .category { font-family: Inter,sans-serif; font-size: 0.6875rem; font-weight: 500; letter-spacing: .14em; color: var(--color-blue); }
#topCases .case .heading { margin-top: 0.5rem; font-size: 1.1875rem; }
#topCases .case .text { margin-top: 0.75rem; font-size: 1rem; line-height: 2; }
#topCases .dots .dot { position: relative; }
#topCases .dots .dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
#topCases .listLink { margin-top: 2.5rem; text-align: center; }
#topCases .listLink .md_btn { justify-content: center; min-width: 17.5rem; padding: 1rem 2.5rem; border-radius: 999px; font-size: .9375rem; }
#topCases .dots .dot:not(.isOn):hover { background: var(--color-blueLight); }
#topCases .case .more { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1.25rem; font-size: .875rem; font-weight: 700; color: var(--color-blueDark); text-decoration: none; transition: color .25s; }
#topCases .case .more .arrow { display: inline-block; font-family: Inter, sans-serif; transition: transform .25s; }
#topCases .case .more:hover { color: var(--color-blueLight); }
#topCases .case .more:hover .arrow { transform: translateX(5px); }
#topCases .slider.isStatic { max-width: var(--container-width); margin-right: auto; margin-left: auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); overflow: visible; }
#topCases .slider.isStatic .track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
#topCases .slider.isStatic .case { flex: none; }
#topCases .nav[hidden], #topCases .dots[hidden] { display: none; }

/*============================
#topNews
============================*/

#topNews .list .link { color: inherit; text-decoration: none; }
#topNews { padding: 6rem 0; background: var(--color-white); border-top: 1px solid var(--color-border); }
#topNews .grid { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 4rem; align-items: start; }
#topNews .list { list-style: none; border-top: 1px solid var(--color-text); }
#topNews .item { border-bottom: 1px solid var(--color-border); }
#topNews .item .link { display: grid; grid-template-columns: 110px 84px minmax(0,1fr) 20px; align-items: center; gap: 1rem; padding: 1.375rem 0.25rem; transition: background .2s; }
#topNews .item .link:hover { background: var(--color-sky); }
#topNews .date { font-family: Inter,sans-serif; font-size: 0.875rem; color: var(--color-textFaint); }
#topNews .category { justify-self: start; font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.75rem; border-radius: 999px; color: var(--color-white); background: var(--color-blue); }
#topNews .category.recruit { background: var(--color-yellow); color: var(--color-text); }
#topNews .title { font-size: 1rem; font-weight: 500; color: var(--color-text); line-height: 1.7; }
#topNews .arrow { color: var(--color-blue); font-family: Inter,sans-serif; }
#topNews .label { font-family: Inter,sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: .2em; color: var(--color-blue); display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
#topNews .label::before { content: ""; width: 24px; height: 3px; background: var(--grad-main); }
#topNews .heading { font-weight: 500; font-size: clamp(1.625rem,3.4vw,2.5rem); line-height: 1.5; letter-spacing: .08em; }
#topNews .item .link { padding-left: 1.25rem; padding-right: 1.25rem; }

/* 事例写真とコピーの階層 */
#topCases .case .photo { position: relative; inset: auto; aspect-ratio: 2.6 / 1; }
#topCases .case .photo picture { display: block; height: 100%; }
#topCases .case .casePhoto { display: block; width: 100%; height: 100%; object-fit: cover; }
#topCases .case .body { padding: 2rem; }
#topCases .case .projectName { margin-top: .875rem; font-size: .8125rem; line-height: 1.8; color: var(--color-textSub); }
#topCases .case .heading { margin-top: .625rem; font-size: clamp(1.25rem, 1.6vw, 1.625rem); line-height: 1.65; letter-spacing: .025em; }

/* カセット全体をひとつのリンクにする */
#topCases .caseLink { display: block; height: 100%; color: inherit; text-decoration: none; }
#topCases .caseLink:focus-visible { outline: 3px solid var(--color-blue); outline-offset: -3px; border-radius: inherit; }
#topCases .caseLink:hover .heading { color: var(--color-blueDark); }
#topCases .caseLink:hover .more .arrow { transform: translateX(5px); }
#topCases .case .photo::after { content: none; }
#topCases .case .body { padding-top: 1rem; }

#topCases .case .casePhoto { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.98) 18%, rgba(0,0,0,.88) 36%, rgba(0,0,0,.65) 54%, rgba(0,0,0,.34) 73%, rgba(0,0,0,.1) 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.98) 18%, rgba(0,0,0,.88) 36%, rgba(0,0,0,.65) 54%, rgba(0,0,0,.34) 73%, rgba(0,0,0,.1) 90%, transparent 100%); }
#topCases .case { background: var(--color-white); }