body {
  font-family: 'Be Vietnam Pro', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  word-break: auto-phrase;
}

.font-en {
  font-family: 'Be Vietnam Pro', 'Noto Sans JP', sans-serif;
}

.font-size-lead {
  font-size: 1.4rem;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .font-size-lead {
    font-size: 1.6rem;
  }
}

.global-001__container {
  max-width: 1180px;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .global-001__container {
    padding: 0 40px;
  }
}
.global-001__main {
  padding-top: calc(112px + var(--bells-adminbar, 0px));
}
@media (min-width: 768px) {
  .global-001__main {
    padding-top: calc(140px + var(--bells-adminbar, 0px));
  }
}
.global-001__inner {
  padding-bottom: 60px;
}

.drawer-active .navigation-001__contents {
  visibility: hidden;
  opacity: 0;
}
.header-001__id .drawer-logo-color {
  display: none;
}

.drawer-active .navigation-001 #drawer__trigger {
  width: 65px;
  height: 100%;
  opacity: 1;
  visibility: visible;
}

.global-001__bg .bg .fill:not(:last-child) {
  margin-right: -1px;
}


.items-grid > ul {
  margin-bottom: -1px;
}

@media (max-width: 639.98px) {
  .flow-steps {
    gap: 48px;
  }
  .flow-arrow-sp {
    width: 28px;
    height: 28px;
    bottom: -26px;
  }
}

.index_service__pattern {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0) 100%);
  background-repeat: repeat-y;
  background-size: 100% 285vw;
  background-image:
    radial-gradient(circle 66vw at 86% 23.2%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.34) 99.4%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 42vw at 8% 30.5%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.32) 99.4%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 52vw at 72% 41.4%, rgba(203, 213, 225, 0.55) 0%, rgba(203, 213, 225, 0.22) 99.4%, rgba(203, 213, 225, 0) 100%),
    radial-gradient(circle 58vw at 18% 53.7%, rgba(148, 163, 184, 0.3) 0%, rgba(148, 163, 184, 0.12) 99.4%, rgba(148, 163, 184, 0) 100%),
    radial-gradient(circle 48vw at 94% 63.2%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.32) 99.4%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 62vw at 32% 76.5%, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.3) 99.4%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 38vw at 80% 85.3%, rgba(148, 163, 184, 0.32) 0%, rgba(148, 163, 184, 0.13) 99.4%, rgba(148, 163, 184, 0) 100%);
}
@media (min-width: 768px) {
  .index_service__pattern {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0) 94%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0) 94%);
    background-repeat: no-repeat;
    background-size: auto;
    background-image:
      radial-gradient(circle max(66vw, 726px) at 86% 3%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.34) 99.4%, rgba(255, 255, 255, 0) 100%),
      radial-gradient(circle max(42vw, 462px) at 8% 14%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.32) 99.4%, rgba(255, 255, 255, 0) 100%),
      radial-gradient(circle max(52vw, 572px) at 72% 30%, rgba(203, 213, 225, 0.55) 0%, rgba(203, 213, 225, 0.22) 99.4%, rgba(203, 213, 225, 0) 100%),
      radial-gradient(circle max(58vw, 638px) at 18% 48%, rgba(148, 163, 184, 0.3) 0%, rgba(148, 163, 184, 0.12) 99.4%, rgba(148, 163, 184, 0) 100%),
      radial-gradient(circle max(48vw, 528px) at 94% 62%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.32) 99.4%, rgba(255, 255, 255, 0) 100%),
      radial-gradient(circle max(62vw, 682px) at 32% 82%, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.3) 99.4%, rgba(255, 255, 255, 0) 100%),
      radial-gradient(circle max(38vw, 418px) at 80% 95%, rgba(148, 163, 184, 0.32) 0%, rgba(148, 163, 184, 0.13) 99.4%, rgba(148, 163, 184, 0) 100%);
  }
}


.service-detail {
  --svc-band: #0079c8;
  --svc-band-deep: #005e9c;
  --svc-accent: 29 78 216;
  --svc-bar: #0284c7;
  --svc-tint: #eff6ff;
  --svc-tint-a: #f0f9ff;
  --svc-tint-b: #e0f2fe;
}

.service-detail.theme-ai {
  --svc-band: #0079c8;
  --svc-band-deep: #005e9c;
  --svc-accent: 29 78 216;
  --svc-bar: #0284c7;
  --svc-tint: #eff6ff;
  --svc-tint-a: #f0f9ff;
  --svc-tint-b: #e0f2fe;
}
.service-detail.theme-web {
  --svc-band: #e11d48;
  --svc-band-deep: #9f1239;
  --svc-accent: 190 18 60;
  --svc-bar: #e11d48;
  --svc-tint: #fff1f2;
  --svc-tint-a: #fff1f2;
  --svc-tint-b: #ffe4e6;
}
.service-detail.theme-design {
  --svc-band: #4f46e5;
  --svc-band-deep: #3730a3;
  --svc-accent: 67 56 202;
  --svc-bar: #4f46e5;
  --svc-tint: #eef2ff;
  --svc-tint-a: #eef2ff;
  --svc-tint-b: #e0e7ff;
}
.service-detail.theme-sns {
  --svc-band: #0d9488;
  --svc-band-deep: #115e59;
  --svc-accent: 15 118 110;
  --svc-bar: #0d9488;
  --svc-tint: #f0fdfa;
  --svc-tint-a: #f0fdfa;
  --svc-tint-b: #ccfbf1;
}
.service-detail.theme-account {
  --svc-band: #b45309;
  --svc-band-deep: #78350f;
  --svc-accent: 180 83 9;
  --svc-bar: #d97706;
  --svc-tint: #fffbeb;
  --svc-tint-a: #fffbeb;
  --svc-tint-b: #fef3c7;
}

.svc-band {
  background-color: var(--svc-band);
}
.svc-band-deep {
  background-color: var(--svc-band-deep);
  border-color: rgb(255 255 255 / 0.2);
}
.svc-accent {
  color: rgb(var(--svc-accent));
}
.svc-accent-70 {
  color: rgb(var(--svc-accent) / 0.7);
}
.svc-bar {
  background-color: var(--svc-bar);
}
.svc-chip {
  background-color: var(--svc-tint);
  color: rgb(var(--svc-accent));
}
.svc-card-head {
  background-image: linear-gradient(to bottom, var(--svc-tint-a), var(--svc-tint-b));
}


.wf-anim [data-anim='fade'] {
  opacity: 0;
  translate: 0 32px;
  transition:
    opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--wf-fade-lead, 0.18s) + var(--wf-delay, 0s)),
    translate 1.15s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--wf-fade-lead, 0.18s) + var(--wf-delay, 0s)),
    transform var(--wf-hover-dur, 300ms) var(--wf-hover-ease, ease) var(--wf-hover-delay, 100ms);
}
.wf-anim [data-anim='fade'].duration-300 {
  --wf-hover-dur: 300ms;
}
.wf-anim [data-anim='fade'].duration-500 {
  --wf-hover-dur: 500ms;
}
.wf-anim [data-anim='fade'].duration-700 {
  --wf-hover-dur: 700ms;
}
.wf-anim [data-anim='fade'][data-anim-fixed] {
  translate: none;
}
.wf-anim [data-anim='fade'].wf-in {
  opacity: 1;
  translate: none;
}

.wf-anim [data-anim='title'] {
  clip-path: inset(0 100% 0 0);
  transition-property: clip-path;
  transition-delay: calc(var(--wf-title-lead, 0.35s) + var(--wf-delay, 0s));
}
.wf-anim [data-anim='title'].wf-in {
  clip-path: inset(0 0 0 0);
}

@keyframes wf-zoom-out {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
.page-hero__media img {
  animation: wf-zoom-out 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.wf-anim .page-hero__bar {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--wf-delay, 0s);
}
.wf-anim .page-hero__bar.wf-in {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__media img {
    animation: none !important;
  }
}

@keyframes wf-hero-catch {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  12.5% {
    opacity: 1;
    transform: translateY(0);
  }
  31.25% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 0;
    transform: translateY(-16px);
  }
  50%,
  86.25% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes wf-hero-logo {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes wf-hero-logo-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-16px);
  }
}

.top-hero__catch {
  animation: wf-hero-catch 8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.top-hero__logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1.5rem;
  margin: 0;
  pointer-events: none;
  animation: wf-hero-logo-out 0.8s cubic-bezier(0.16, 1, 0.3, 1) 6.6s both;
}
.top-hero__logo-mark {
  height: clamp(48px, 16.1vw, 134px);
  width: auto;
}
.top-hero__logo-type {
  height: clamp(38px, 12.8vw, 107px);
  width: auto;
}
@media (min-width: 768px) {
  .top-hero__logo {
    gap: 1.5rem;
    padding-left: 3rem;
  }
  .top-hero__logo-mark {
    height: clamp(67px, 14.7vw, 134px);
  }
  .top-hero__logo-type {
    height: clamp(53px, 11.7vw, 107px);
  }
}

.top-hero__logo-mark {
  animation: wf-hero-logo 1.1s cubic-bezier(0.16, 1, 0.3, 1) 3.4s both;
}
.top-hero__logo-type {
  animation: wf-hero-logo 1.1s cubic-bezier(0.16, 1, 0.3, 1) 4s both;
}

@media (prefers-reduced-motion: reduce) {
  .top-hero__catch {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .top-hero__logo {
    animation: none;
    opacity: 0;
  }
  .top-hero__logo-mark,
  .top-hero__logo-type {
    animation: none;
  }
}

.top-hero__media {
  height: max(440px, 70vh);
}

@media (min-width: 768px) {
  .top-hero__media {
    height: min(45rem, 90vh);
  }
}

@media (orientation: portrait) and (max-width: 1023px) {
  .top-hero__media {
    height: max(260px, 100vh - var(--bells-adminbar, 0px) - 2 * min(25vw, 128px) - 3px);
    height: max(260px, 100svh - var(--bells-adminbar, 0px) - 2 * min(25vw, 128px) - 3px);
    max-height: 45rem;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .top-hero__media {
    height: 70vh;
  }
}

@media (max-width: 1023px) {
  .index_banner a {
    aspect-ratio: auto;
    height: min(25vw, 128px);
  }
}

.top-hero__media video,
.top-hero__media .top-hero__mesh {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.top-hero__media.is-ready video,
.top-hero__media.is-ready .top-hero__mesh {
  opacity: 1;
}

.top-hero__mesh {
  --mesh-pitch: 3px;
  --mesh-line: 1px;
  --mesh-alpha: 0.28;

  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.7s ease;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, var(--mesh-alpha)) 0 var(--mesh-line),
      transparent var(--mesh-line) var(--mesh-pitch)
    ),
    repeating-linear-gradient(
      to right,
      rgba(0, 0, 0, var(--mesh-alpha)) 0 var(--mesh-line),
      transparent var(--mesh-line) var(--mesh-pitch)
    );
}

.svc-showreel-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


.wpcf7-form-control-wrap {
  display: flex;
  flex-direction: column;
}

.wpcf7-form-control.wpcf7-acceptance,
.wpcf7-list-item {
  display: contents;
}

.wpcf7 .hidden-fields-container,
.wpcf7-spinner {
  display: none;
}

.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5rem;
  font-size: 12px;
  line-height: 1.6;
  color: #b91c1c;
}

.wpcf7 form .wpcf7-response-output {
  margin-top: 2rem;
  border: 1px solid #b91c1c;
  padding: 0.9rem 1.25rem;
  font-size: 13px;
  line-height: 1.8;
  color: #b91c1c;
  text-align: center;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
  display: none;
}


.header-001:has(.bells-subnav) {
  overflow: visible;
}

.bells-subnav {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;
  min-width: max(100%, 11em);
  margin-top: 0.75rem;
  padding: 0.25rem 0;
  transform: translateX(-50%);
  background-color: rgb(0 0 0 / 90%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 250ms ease,
    visibility 0s ease 250ms;
}

.bells-subnav::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 0.75rem;
}

.navigation-001__item:hover > .bells-subnav,
.navigation-001__item:focus-within > .bells-subnav {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.bells-subnav a {
  display: block;
  padding: 0.7em 1.4em;
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition:
    color 200ms,
    background-color 200ms;
}

.bells-subnav a:hover {
  background-color: rgb(255 255 255 / 8%);
  color: #ea0002;
}

@media (max-width: 767px) {
  .index_service__image {
    max-width: none;
    aspect-ratio: 1541 / 1472;
    overflow: hidden;
  }
  .index_service__image img {
    width: 131.1%;
    max-width: none;
    margin-left: -15.6%;
    margin-top: -4.1%;
  }
}

@media screen and (max-width: 767px) {
  .header-001__target {
    width: 96px;
  }
  .header-001__container {
    width: calc(100% - 96px);
  }
}