:root {
  --top-ink: #17211d;
  --top-muted: #65706b;
  --top-tint: #f3f6f2;
  --top-line: #dce3de;
  --top-accent: #2f7358;
  --top-dark: #15231d;
}

/* Top navigation and movie start as separate horizontal bands. */
.index-box1 { background-color: transparent; }
.index-box1 .hero-brand { display: flex; align-items: center; justify-content: center; gap: 16px; background: transparent; }
.index-box1 .hero-company-name { display: block; margin: 0; padding: 0; color: rgba(255, 255, 255, .9); background: transparent; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .16em; white-space: nowrap; text-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
.index-box1 .hero-message { display: contents; }
.index-box1 .hero-main-title { display: block; margin-top: 30px; color: #fff; background: transparent; text-shadow: 0 3px 14px rgba(0, 0, 0, .8); }
.index-box1 .hero-main-line { display: block; margin: 0; padding: 0; color: #fff; background: transparent; font-size: clamp(25px, 2.6vw, 39px); font-weight: 700; line-height: 1.55; letter-spacing: .06em; }
.index-box1 .hero-latin { margin-top: 18px; padding: 0; color: rgba(255, 255, 255, .82); background: transparent; font-size: clamp(10px, .85vw, 13px); font-weight: 300; letter-spacing: .12em; }
.index-box1 .hero-animated-copy > span { display: inline-block; margin: 0; padding: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; opacity: 0; transform: translateY(12px) rotate(2deg); transition: opacity .75s ease, transform .75s ease; }
.index-box1 .hero-animated-copy.is-visible > span { opacity: 1; transform: translateY(0) rotate(0); }
.index-concept-intro { color: #fff; background-color: rgba(21, 35, 29, .20); text-align: center; }
.index-concept-intro p { color: #fff; text-align: center; }
.index-concept-intro .intro-mobile-break { display: none; }
.index-concept-intro .index-more-link { color: #fff; }
.index-concept-intro .index-more-link span { margin-top: 24px; color: #fff; }
.index-concept-intro .top-case-heading.is-visible .top-case-heading__char { animation-duration: 820ms; animation-delay: calc(var(--case-index) * 12ms); }

@media (min-width: 1080px) {
  .index #header { top: 0; left: 0; background-color: rgba(0, 0, 0, .80) !important; box-shadow: none; }
  .index #header .header-navi .logo-area a.black { background-image: url("../images/logo_ours_script-white.png") !important; }
  .index #header .header-navi .logo-area a.black { color: #fff !important; }
  .index #header .header-navi .navi-area a { color: #fff !important; text-shadow: none !important; }
  .index #header .header-navi .navi-area a:hover { background-color: rgba(255, 255, 255, .14) !important; }
  .index #header.fixed { background-color: #fff !important; box-shadow: 0 0 10px rgba(0, 0, 0, .25); }
  .index #header.fixed .header-navi .logo-area a { background-image: url("../images/logo_ours_script.png") !important; }
  .index #header.fixed .header-navi .logo-area a { color: #000 !important; }
  .index #header.fixed .header-navi .navi-area a { color: #000 !important; }
  .index #header.fixed .header-navi .navi-area a:hover { background-color: rgba(0, 0, 0, .10) !important; }
  .index #bgv { top: 52px; height: calc(100vh - 52px); }
  .index .wrapper { padding-top: 52px; }
  .index .index-box1 { height: calc(67vh - 52px); }
  .index .index-concept-intro { height: 33vh; min-height: 0; box-sizing: border-box; }
  .index .index-concept-intro > div { max-width: 1180px; }
  .index .index-concept-intro p { white-space: nowrap; font-size: clamp(14px, 1.25vw, 17px); letter-spacing: -.015em; }
}

.top-business, .top-demo, .top-cases, .top-contact,
.top-business *, .top-demo *, .top-cases *, .top-contact * { box-sizing: border-box; }
.top-business, .top-demo, .top-cases, .top-contact { overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.top-container { width: min(calc(100% - 48px), 1120px); margin: 0 auto; }
.top-business { padding: 112px 0 125px; color: var(--top-ink); background: #fff; }
.top-section-heading { margin-bottom: 34px; }
.top-eyebrow { margin: 0 0 10px; color: var(--top-accent); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.top-section-heading h2 { margin: 0; color: var(--top-ink); font-size: clamp(36px, 4.6vw, 58px); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.top-business-lead { max-width: 830px; margin: 0 0 50px; color: var(--top-muted); font-size: clamp(17px, 2vw, 22px); font-weight: 600; line-height: 1.9; }

.top-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.top-service-card { --service-image: none; position: relative; display: block; min-height: 390px; overflow: hidden; color: #fff; background: #10241c; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; text-decoration: none; box-shadow: 0 22px 60px rgba(20, 35, 29, .14); isolation: isolate; transition: transform .35s ease, box-shadow .35s ease; }
.top-service-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--service-image); background-size: cover; background-position: center; filter: grayscale(1); opacity: .2; transform: scale(1.03); transition: filter .6s ease, opacity .6s ease, transform .8s ease; }
.top-service-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(125deg, rgba(5, 19, 14, .98) 5%, rgba(8, 30, 22, .85) 58%, rgba(8, 30, 22, .52)); }
.top-service-card:hover { color: #fff; box-shadow: 0 28px 70px rgba(11, 34, 24, .25); transform: translateY(-6px); }
.top-service-card:hover::before { filter: grayscale(.35); opacity: .42; transform: scale(1.08); }
.top-service-card--ai { --service-image: url("../business/images/bg_ai_introduction.jpg"); }
.top-service-card--system { --service-image: url("../images/bg_business-system_top.jpg"); }
.top-service-card--web { --service-image: url("../images/bg_business-web_top.jpg"); }
.top-service-card--other { --service-image: url("../images/bg_business-other_top.jpg"); }
.top-service-card__content { display: flex; min-height: 390px; flex-direction: column; padding: clamp(34px, 4.5vw, 52px); }
.top-card-label { margin: 0 0 42px; color: #68e0ad; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.top-service-card h3 { margin: 0 0 20px; color: #fff; font-size: clamp(25px, 2.8vw, 37px); font-weight: 700; line-height: 1.5; letter-spacing: -.015em; }
.top-service-card__content > p:not(.top-card-label) { max-width: 455px; margin: 0; color: rgba(229, 242, 235, .75); font-size: 13px; line-height: 1.9; }
.top-card-link { margin-top: auto; padding-top: 28px; color: #68e0ad; font-size: 12px; font-weight: 700; }
.top-card-link::after { content: " →"; margin-left: 7px; }

.top-demo { position: relative; padding: 105px 0; overflow: hidden; color: #fff; background: #06140f; }
.top-demo::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background-image: linear-gradient(rgba(95, 225, 170, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 225, 170, .09) 1px, transparent 1px), radial-gradient(circle at 78% 18%, rgba(47, 190, 130, .5), transparent 32%); background-size: 34px 34px, 34px 34px, auto; }
.top-demo-banner { position: relative; display: grid; grid-template-columns: 1.25fr .95fr; align-items: end; min-height: 360px; padding: clamp(38px, 6vw, 70px); overflow: hidden; color: #fff; background: linear-gradient(135deg, rgba(15, 49, 36, .92), rgba(5, 22, 15, .96)); border: 1px solid rgba(103, 227, 174, .22); border-radius: 12px; box-shadow: 0 35px 90px rgba(0, 0, 0, .3); text-decoration: none; }
.top-demo-banner::after { content: ""; position: absolute; width: 340px; height: 340px; right: -80px; top: -100px; border: 1px solid rgba(99, 230, 173, .12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(77, 211, 155, .03), 0 0 0 110px rgba(77, 211, 155, .025); }
.top-demo-banner:hover { color: #fff; border-color: rgba(103, 227, 174, .5); }
.top-demo-banner .top-eyebrow { color: #5de0a7; }
.top-demo-banner h2 { margin: 0 0 20px; color: #fff; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.25; letter-spacing: -.035em; }
.top-demo-banner__copy > p:last-child { margin: 0; color: rgba(221, 238, 229, .72); font-size: 14px; line-height: 1.9; }
.top-demo-flow { display: flex; align-items: center; align-self: center; justify-self: end; gap: 7px; margin-bottom: 42px; color: #829b90; font-size: 8px; letter-spacing: .08em; }
.top-demo-flow i { display: block; width: 30px; height: 1px; background: linear-gradient(90deg, #35584a, #54dba2); }
.top-demo-link { position: absolute; right: clamp(38px, 6vw, 70px); bottom: clamp(38px, 6vw, 70px); color: #5de0a7; font-size: 13px; font-weight: 800; }
.top-demo-link b { margin-left: 14px; font-size: 18px; }

.top-cases { padding: 120px 0; color: var(--top-ink); background: #f3f6f3; }
.top-cases-lead { max-width: 700px; margin: -10px 0 48px; color: var(--top-muted); font-size: 15px; line-height: 1.9; }
.top-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.top-case-card { position: relative; min-height: 265px; padding: 30px; overflow: hidden; background: #fff; border: 1px solid #dfe7e2; border-radius: 8px; box-shadow: 0 14px 35px rgba(25, 52, 41, .05); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.top-case-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -48px; bottom: -48px; border: 1px solid #cde1d6; border-radius: 50%; box-shadow: 0 0 0 18px #f3f8f5; }
.top-case-card:hover { border-color: #8cbca7; box-shadow: 0 20px 45px rgba(25, 52, 41, .1); transform: translateY(-4px); }
.top-case-card > span { display: inline-block; margin-bottom: 45px; color: var(--top-accent); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.top-case-card h3 { margin: 0 0 15px; color: var(--top-ink); font-size: 20px; line-height: 1.55; }
.top-case-card p { margin: 0; color: var(--top-muted); font-size: 12px; line-height: 1.9; }
.top-case-heading { overflow: hidden; }
.top-case-heading.is-prepared .top-case-heading__char { display: inline-block; opacity: 0; transform: translateY(var(--case-offset)); will-change: transform, opacity; }
.top-case-heading.is-visible .top-case-heading__char { animation: top-case-char-rise 900ms cubic-bezier(.16, .78, .28, 1) both; animation-delay: calc(var(--case-index) * 42ms + var(--case-extra-delay)); }
.top-case-heading--fast.is-visible .top-case-heading__char { animation-duration: 620ms; animation-delay: calc(var(--case-index) * 4ms); }

@keyframes top-case-char-rise {
  0% { opacity: 0; transform: translateY(var(--case-offset)); }
  72% { opacity: 1; transform: translateY(-.08em); }
  100% { opacity: 1; transform: translateY(0); }
}

.top-contact { position: relative; z-index: 2; padding: 105px 0; color: #fff; background: #16271f; isolation: isolate; }
.top-contact__inner { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 80px; }
.top-contact .top-eyebrow { color: #61dca5; }
.top-contact h2 { margin: 0; color: #fff; font-size: clamp(32px, 4.5vw, 53px); line-height: 1.42; letter-spacing: -.025em; }
.top-contact__inner > div:last-child p { margin: 0 0 30px; color: #aebfb7; font-size: 14px; line-height: 1.9; }
.top-contact__inner a { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 24px; color: #092219; background: #5edda6; border-radius: 4px; font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.top-contact__inner a:hover { color: #092219; box-shadow: 0 15px 40px rgba(66, 220, 159, .2); transform: translateY(-2px); }
.top-contact__inner a span { font-size: 18px; }
.top-news { margin-top: 0 !important; background-color: #f3f6f3; }

.top-roll-heading { position: relative; perspective: 900px; transform-style: preserve-3d; }
.top-roll-heading.is-prepared .top-roll-heading__char { display: inline-block; opacity: 0; filter: blur(9px); transform: translate3d(.8em, 2.4em, -320px) rotateX(-145deg) rotateY(52deg) rotateZ(24deg) scale(.38); transform-origin: 10% 100%; will-change: transform, opacity, filter; }
.top-roll-heading.is-visible .top-roll-heading__char { animation: top-heading-roll-in 1700ms cubic-bezier(.13, .78, .2, 1.12) both; animation-delay: calc(var(--roll-index) * 130ms); }
.top-roll-heading.is-prepared::after { content: ""; position: absolute; left: -5%; top: 48%; width: 28%; height: 1.5em; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(71, 220, 157, .5), rgba(255, 255, 255, .8), transparent); filter: blur(8px); mix-blend-mode: screen; transform: translateX(-120%) skewX(-24deg); }
.top-roll-heading.is-visible::after { animation: top-heading-light-sweep 1250ms ease-out calc(var(--roll-count, 8) * 130ms + 900ms) both; }
.top-roll-heading--light.is-prepared::after { background: linear-gradient(90deg, transparent, rgba(82, 231, 168, .65), rgba(255, 255, 255, .95), transparent); }

@keyframes top-heading-roll-in {
  0% { opacity: 0; filter: blur(9px); transform: translate3d(.8em, 2.4em, -320px) rotateX(-145deg) rotateY(52deg) rotateZ(24deg) scale(.38); }
  65% { opacity: 1; filter: blur(0); transform: translate3d(-.06em, -.16em, 26px) rotateX(11deg) rotateY(-6deg) rotateZ(-3deg) scale(1.06); text-shadow: 0 0 28px rgba(72, 223, 159, .32); }
  84% { opacity: 1; transform: translate3d(.025em, .05em, 0) rotateX(-4deg) rotateY(2deg) rotateZ(.8deg) scale(.985); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); text-shadow: none; }
}

@keyframes top-heading-light-sweep {
  0% { opacity: 0; transform: translateX(-120%) skewX(-24deg); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: translateX(410%) skewX(-24deg); }
}

@media (max-width: 1079px) {
  .index #bgv { display: block !important; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; }
  .index .mb-slideshow { display: none !important; }
  .index-box1 .hero-copy { position: relative; width: 100%; height: 100%; text-align: center !important; }
  .index-box1 .hero-brand { position: absolute; z-index: 1; top: calc(50% - 55px); left: 0; width: 100%; gap: 0; justify-content: center; }
  .index-box1 .hero-brand .hero-logo { width: 150px; max-width: 50%; margin: 0; }
  .index-box1 .hero-company-name { font-size: 10px; letter-spacing: .1em; }
  .index-concept-intro p { font-size: .9rem; line-height: 1.85; }
  .index-box1 .hero-message { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .index-box1 .hero-main-title,
  .index-box1 .hero-main-line,
  .index-box1 .hero-latin { width: 100%; text-align: center; }
  .index-box1 .hero-main-title { margin-top: 0; }
  #nav-open { background: linear-gradient(135deg, #0f3124 0%, #06140f 100%); border: 1px solid rgba(94, 221, 166, .26); box-shadow: 0 8px 24px rgba(2, 17, 11, .28); }
  #nav-open span,
  #nav-open span::before,
  #nav-open span::after { background: #fff; }
}

@media (max-width: 760px) {
  .index-box1 .hero-brand { top: calc(50% - 40px); }
  .index-box1 h2 { background-color: transparent; }
  .index-box1 .hero-brand .hero-logo { width: 150px; max-width: 50%; }
  .index-box1 .hero-main-title { margin-top: 24px; padding: 0; background: transparent; }
  .index-box1 .hero-main-line { margin: 0; padding: 0; background: transparent; font-size: clamp(20px, 6vw, 27px); line-height: 1.55; letter-spacing: .03em; }
  .index-box1 .hero-latin { margin-top: 15px; padding: 0; background: transparent; font-size: 9px; line-height: 1.5; letter-spacing: .04em; }
  .index-concept-intro p { color: #fff; }
  .index-concept-intro .intro-mobile-break { display: block; }
  .index-concept-intro p { white-space: normal; }
  .index-concept-intro .index-more-link span { margin-top: 22px; }
  .top-container { width: min(calc(100% - 36px), 1120px); }
  .top-business, .top-cases { padding: 78px 0; }
  .top-business-lead { margin-bottom: 38px; font-size: 16px; }
  .top-business-lead br { display: none; }
  .top-service-grid, .top-case-grid { grid-template-columns: 1fr; }
  .top-service-card, .top-service-card__content { min-height: 330px; }
  .top-service-card__content { padding: 30px 26px; }
  .top-service-card h3 { font-size: 27px; }
  .top-web-service-title > span { display: block; white-space: nowrap; }
  .top-web-service-title__break { display: none; }
  .top-demo { padding: 70px 0; }
  .top-demo-banner { display: block; min-height: 500px; padding: 34px 24px; }
  .top-demo-banner h2 { font-size: 37px; }
  .top-demo-banner__copy > p:last-child br { display: none; }
  .top-demo-flow { position: absolute; left: 24px; right: 24px; bottom: 104px; justify-content: center; margin: 0; }
  .top-demo-flow i { flex: 1; max-width: 38px; }
  .top-demo-link { left: 24px; right: 24px; bottom: 30px; display: flex; min-height: 58px; align-items: center; justify-content: space-between; padding: 0 20px; color: #082117; background: #5de0a7; border-radius: 4px; }
  .top-case-card { min-height: 230px; }
  .top-case-card > span { margin-bottom: 32px; }
  .top-contact { min-height: 520px; padding: 78px 0; background-color: #16271f; background-image: linear-gradient(145deg, #1d352a 0%, #10251c 100%); }
  .top-contact__inner { grid-template-columns: 1fr; gap: 38px; }
  .top-contact h2 { font-size: 34px; }
  .top-contact .top-roll-heading.is-prepared .top-roll-heading__char,
  .top-contact .top-roll-heading.is-visible .top-roll-heading__char { opacity: 1; filter: none; transform: none; animation: none; }
  .top-contact .top-roll-heading.is-prepared::after { display: none; }
  .top-roll-heading.is-visible .top-roll-heading__char { animation-duration: 720ms; animation-delay: calc(var(--roll-index) * 18ms); }
  .top-roll-heading.is-visible::after { animation-delay: 900ms; }
  .top-contact__inner > div:last-child p br { display: none; }
  .top-news { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; }
  .top-news h2 { font-size: 1.5rem; }
  .top-news .box-news-content li .date,
  .top-news .box-news-content li .text { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .top-service-card, .top-service-card::before, .top-case-card, .top-contact__inner a { transition: none; }
  .top-roll-heading.is-prepared .top-roll-heading__char { opacity: 1; filter: none; transform: none; animation: none; }
  .top-roll-heading.is-prepared::after { display: none; }
  .top-case-heading.is-prepared .top-case-heading__char { opacity: 1; transform: none; animation: none; }
}