@charset "UTF-8";

.hero-business {
  min-height: 1000px;
  padding: 150px 0 76px;
  background: #6c96af url("../../_images/business/index/index-main-bg.webp") right top / cover no-repeat;
}
.hero-business-catch {
  position: relative;
  margin: 28px 0 0;
  padding-left: 80px;
  font-weight: 900;
  font-size: 61px;
  line-height: 109px;
  letter-spacing: var(--letter-spacing-base);
  text-shadow: 0 4px 16px rgba(30, 60, 80, .22);
}
.hero-business-catch::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 20px;
  left: 0;
  width: 19px;
  border-radius: 10px;
  background: var(--color-accent);
}
.hero-business-lead {
  margin: 22px -24px 0 303px;
  font-weight: 500;
  font-size: 18px;
  line-height: 51px;
  letter-spacing: var(--letter-spacing-base);
}
.hero-business-line, .hero-business-sentence { display: block; }
.hero-business-tail { white-space: nowrap; }
.hero-business .page-hero-head { position: relative; border-bottom-color: transparent; }
.hero-business .page-hero-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #fff;
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .js .page-lower .hero-business .page-hero-head { opacity: 1; translate: none; transition: none; }
  .js .page-lower .hero-business .page-hero-head::before {
    transform: scaleX(0);
    transition: transform 1.32s cubic-bezier(.16, 1, .3, 1) .22s;
  }
  .js.is-loaded .page-lower .hero-business .page-hero-head::before { transform: scaleX(1); }
  .js .page-lower .hero-business .page-hero-head > span {
    opacity: 0;
    translate: 0 24px;
    transition: opacity .9s var(--ease), translate .9s var(--ease);
  }
  .js.is-loaded .page-lower .hero-business .page-hero-head > span { opacity: 1; translate: none; }
  .js .page-lower .hero-business .hero-business-catch {
    opacity: 1;
    translate: none;
    transition: none;
    transition-delay: 0s !important;
  }
  .js .page-lower .hero-business-catch::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .85s cubic-bezier(.16, 1, .3, 1) .08s;
  }
  .js.is-loaded .page-lower .hero-business-catch::before { transform: scaleY(1); }
  .js .page-lower .hero-business-line {
    opacity: 0;
    translate: -.45em 0;
    clip-path: inset(-.15em 100% -.15em -.3em);
    transition: opacity .65s ease, translate 1s cubic-bezier(.16, 1, .3, 1), clip-path 1s cubic-bezier(.16, 1, .3, 1);
    transition-delay: .22s;
  }
  .js .page-lower .hero-business-line:nth-child(2) { transition-delay: .38s; }
  .js .page-lower .hero-business-line:nth-child(3) { transition-delay: .54s; }
  .js.is-loaded .page-lower .hero-business-line {
    opacity: 1;
    translate: none;
    clip-path: inset(-.15em -.3em -.15em -.3em);
  }
  .js .page-lower .hero-business .hero-business-lead {
    translate: 0 16px;
    transition: opacity .9s ease, translate 1s cubic-bezier(.16, 1, .3, 1);
    transition-delay: .72s !important;
  }
  .js.is-loaded .page-lower .hero-business .hero-business-lead { translate: none; }
}

@media (max-width: 900px) {
  .hero-business-sentence { display: inline; }
}
.hero-anchor-list {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 75px 0 0;
  padding: 0;
  list-style: none;
}
.btn-anchor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 332px;
  height: 85px;
  padding: 0 56px 0 28px;
  border: 2px solid #fff;
  border-radius: 32px;
  background: transparent;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-base);
  color: #fff;
  text-align: center;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.btn-anchor svg { position: absolute; top: 50%; right: 28px; width: 20px; height: 20px; translate: 0 -50%; transition: translate .3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn-anchor:hover { background: var(--color-accent); }
  .btn-anchor:hover svg { translate: 0 calc(-50% + 4px); }
}
.btn-anchor:focus-visible { background: var(--color-accent); }
.btn-anchor:focus-visible svg { translate: 0 calc(-50% + 4px); }

.business-intro { padding: 200px 0 159px; }
.business-intro-media { padding: 135px 0 190px; }
.business-intro-body {
  display: grid;
  grid-template-columns: minmax(0, 550px) 564px;
  justify-content: space-between;
  align-items: start;
  margin-top: 104px;
}
.business-intro-media .business-intro-body { align-items: center; }
.business-intro-media .business-intro-desc { max-width: 530px; }
.business-intro-text { padding-top: 42px; }
.business-intro-lead { margin: 0; font-weight: 900; font-size: 40px; line-height: 70px; letter-spacing: var(--letter-spacing-base); }
.business-intro-phrase { display: inline-block; }
.business-intro-desc { margin: 44px 0 0; font-weight: 400; font-size: 20px; line-height: 54px; letter-spacing: var(--letter-spacing-base); }
.business-intro-figure { position: relative; margin: 0; }
.business-intro-figure img { display: block; width: 100%; height: auto; }
.business-intro-photo img { border-radius: 8px; }
.business-intro-photo .vertical-label { top: 342px; right: -36px; }
.business-intro-device .vertical-label { top: 240px; bottom: -108px; right: -36px; }

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 161px 0 0;
  padding: 0;
  list-style: none;
}
.feature-item { position: relative; min-height: 445px; padding-top: 56px; }
.feature-item + .feature-item { padding-left: 22px; }
.feature-item + .feature-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -81px;
  width: 81px;
  height: 445px;
  background: linear-gradient(to top left, transparent calc(50% - .7px), #191919 50%, transparent calc(50% + .7px));
}
.feature-num {
  position: absolute;
  top: -30px;
  left: 198px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 156px;
  line-height: 1;
  letter-spacing: var(--letter-spacing-base);
  color: #ffe9e1;
}
.feature-en, .feature-title, .feature-text { position: relative; }
.feature-en { margin: 0; font-family: var(--font-en); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: .16em; color: #aeaeae; }
.feature-title { margin: 11px 0 0; font-weight: 700; font-size: 29px; line-height: 51px; letter-spacing: var(--letter-spacing-base); }
.feature-text { max-width: 302px; margin: 26px 0 0; font-weight: 400; font-size: 20px; line-height: 49px; letter-spacing: var(--letter-spacing-base); }

.business-index { padding: 151px 0 179px; }
.business-index-inner {
  display: grid;
  grid-template-columns: 318px minmax(0, 682px);
  justify-content: space-between;
  align-items: start;
}
.business-index-nav { position: sticky; top: 140px; }
.business-index-label { margin: 0; font-weight: 500; font-size: 19px; line-height: 1; letter-spacing: var(--letter-spacing-base); color: #838383; }
.business-index-en { margin: 14px 0 0; font-family: var(--font-en); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: .16em; color: #aeaeae; }
.business-index-list { margin: 3px 0 0; padding: 0; list-style: none; border-top: 3px solid #000; }
.business-index-list li { border-bottom: 1px solid #000; }
.business-index-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 79px;
  padding: 0 29px 15px 27px;
  font-weight: 500;
  font-size: 19px;
  line-height: 22px;
  letter-spacing: var(--letter-spacing-base);
  color: #838383;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.business-index-link svg { flex: none; width: 18px; height: 18px; color: var(--color-text); opacity: 0; transition: opacity .3s var(--ease); }
.business-index-link:hover { color: var(--color-accent); }
.business-index-link.is-current { background: #f3f3f3; font-weight: 900; color: var(--color-accent); }
.business-index-link.is-current svg { opacity: 1; }

.business-card { position: relative; scroll-margin-top: 140px; }
.business-card + .business-card { margin-top: 81px; padding-top: 60px; border-top: 1px solid #000; }
.business-card .vertical-label { top: 215px; left: -60px; }

@media (prefers-reduced-motion: no-preference) {
  .js .business-page .vertical-label[data-reveal="line"] { opacity: 1; translate: none; transition: none; }
  .js .business-page .vertical-label[data-reveal="line"]::after {
    transform: scaleY(0);
    transform-origin: top;
  }
  .js .business-page .vertical-label[data-reveal="line"].is-inview::after {
    transform: scaleY(1);
    transition: transform 1.4s cubic-bezier(.65, 0, .35, 1) .12s;
  }
}
.business-card + .business-card .vertical-label { top: 275px; }
.business-card-img { position: relative; margin: 0; overflow: hidden; border-radius: 8px; }
.business-card-img img { display: block; width: 100%; height: auto; }
.business-card-img .business-card-screen { position: absolute; top: 46.19%; left: 37.24%; width: 47.21%; }
.business-card-head { margin-top: 43px; padding-left: 55px; }
.business-card-title { margin: 0; font-weight: 900; font-size: 31px; line-height: 1.4; letter-spacing: var(--letter-spacing-base); }
.business-card-sub { margin: 9px 0 0; font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: var(--letter-spacing-base); color: #838383; }
.business-card-text { min-height: 156px; margin: 34px 0 0; font-weight: 400; font-size: 21px; line-height: 52px; letter-spacing: var(--letter-spacing-base); }
.business-card-foot { margin-top: 19px; text-align: right; }

.products-banner { position: relative; height: 415px; overflow: hidden; background: var(--color-bg-light); }
.products-banner-link { position: relative; display: block; height: 100%; color: #fff; }
.products-banner-img {
  position: absolute;
  top: 16px;
  left: calc(50% - 764px);
  width: 1778px;
  max-width: none;
  height: 387px;
  transition: scale .6s var(--ease);
}
.products-banner-panel { position: absolute; inset: 0 auto 0 0; width: calc(50% - 129px); background: var(--color-accent); }
.products-banner-inner { position: absolute; top: 123px; left: calc(100% - 371px); }
.products-banner-title { display: block; font-weight: 900; font-size: 38px; line-height: 64px; letter-spacing: var(--letter-spacing-base); }
.products-banner-more { display: flex; align-items: center; gap: 33px; margin-top: 13px; font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: var(--letter-spacing-base); }
.products-banner-icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1.5px solid #fff;
  border-radius: var(--radius-sm);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.products-banner-icon svg { width: 18px; height: 18px; }

.products-banner .products-banner-link {
  background: var(--color-bg-light);
  isolation: isolate;
  transition: background-color .6s var(--ease);
}
.products-banner .products-banner-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%);
  translate: -110% 0;
  opacity: 0;
  pointer-events: none;
  transition: translate 1.1s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
.products-banner .products-banner-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--banner-hover-color, #193747);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .7s cubic-bezier(.16, 1, .3, 1);
}
.products-banner .products-banner-inner { z-index: 1; }
.products-banner .products-banner-img {
  transform-origin: 60% center;
  transition: scale .9s cubic-bezier(.16, 1, .3, 1), translate .9s cubic-bezier(.16, 1, .3, 1);
}
.products-banner .products-banner-title {
  transition: translate .7s cubic-bezier(.16, 1, .3, 1);
}
.products-banner .products-banner-more { width: fit-content; }
.products-banner .products-banner-label { position: relative; display: block; }
.products-banner .products-banner-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1) .12s;
}
.products-banner .products-banner-icon {
  transition: background-color .4s, color .4s, scale .6s cubic-bezier(.16, 1, .3, 1), translate .6s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
}
.products-banner .products-banner-icon svg { transition: translate .6s cubic-bezier(.16, 1, .3, 1); }

@media (hover: hover) and (pointer: fine) {
  .products-banner .products-banner-link:hover { background: #d8e7ed; }
  .products-banner .products-banner-link:hover::after { translate: 110% 0; opacity: 1; }
  .products-banner .products-banner-link:hover .products-banner-panel::before { clip-path: inset(0); }
  .products-banner .products-banner-link:hover .products-banner-img { scale: 1.07; translate: 20px 0; }
  .products-banner .products-banner-link:hover .products-banner-title { translate: 8px -3px; }
  .products-banner .products-banner-link:hover .products-banner-label::after { transform: scaleX(1); }
  .products-banner .products-banner-link:hover .products-banner-icon { background: #fff; color: var(--banner-hover-color, #193747); scale: 1.15; translate: 12px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
  .products-banner .products-banner-link:hover .products-banner-icon svg { translate: 3px 0; }
}

.products-banner .products-banner-link:focus-visible { background: #d8e7ed; }
.products-banner .products-banner-link:focus-visible::after { translate: 110% 0; opacity: 1; }
.products-banner .products-banner-link:focus-visible .products-banner-panel::before { clip-path: inset(0); }
.products-banner .products-banner-link:focus-visible .products-banner-img { scale: 1.07; translate: 20px 0; }
.products-banner .products-banner-link:focus-visible .products-banner-title { translate: 8px -3px; }
.products-banner .products-banner-link:focus-visible .products-banner-label::after { transform: scaleX(1); }
.products-banner .products-banner-link:focus-visible .products-banner-icon { background: #fff; color: var(--banner-hover-color, #193747); scale: 1.15; translate: 12px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.products-banner .products-banner-link:focus-visible .products-banner-icon svg { translate: 3px 0; }

@media (max-width: 1100px) {
  .products-banner .products-banner-panel { overflow: hidden; }
  .products-banner .products-banner-inner { position: relative; top: auto; left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .products-banner .products-banner-link::after { display: none; }
  .products-banner .products-banner-link:is(:hover, :focus-visible) .products-banner-img,
  .products-banner .products-banner-link:is(:hover, :focus-visible) .products-banner-title,
  .products-banner .products-banner-link:is(:hover, :focus-visible) .products-banner-icon,
  .products-banner .products-banner-link:is(:hover, :focus-visible) .products-banner-icon svg { scale: none; translate: none; }
}

.flow-section { container-type: inline-size; padding: 173px 0 172px; background: #6c96af; color: #fff; }
.flow-head { margin: 0; }
.flow-head-en { display: block; font-family: var(--font-en); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: .16em; }
.flow-head-ja { display: block; margin-top: 17px; font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: var(--letter-spacing-base); }
.flow-slider, .site-slider {
  --slider-pad: max(var(--gutter), calc((100% - var(--container)) / 2));
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--slider-pad);
  scrollbar-width: thin;
}
.flow-slider { --slider-thumb: rgba(255, 255, 255, .7); --slider-thumb-hover: #fff; margin-top: 39px; padding-bottom: 24px; scrollbar-color: var(--slider-thumb) transparent; }
.site-slider { --slider-thumb: #c9c9c9; --slider-thumb-hover: #a6a6a6; margin-top: 69px; padding-bottom: 14px; scrollbar-color: var(--slider-thumb) transparent; }

.flow-slider:focus-visible, .site-slider:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.flow-list, .site-card-list {
  display: flex;
  gap: 28px;
  width: max-content;
  margin: 0;
  padding: 0 var(--slider-pad);
  list-style: none;
}
.flow-card {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 382px;
  height: 503px;
  padding: 80px 46px 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(20, 50, 70, .22);
  color: var(--color-text);
  scroll-snap-align: start;
}
.flow-card-icon { width: 260px; height: 190px; margin: 0 auto; }
.flow-card-num { margin-top: 19px; font-family: var(--font-en); font-weight: 700; font-size: 84px; line-height: 1; }
.flow-card-num::after { content: ""; display: block; width: 136px; height: 2px; margin-top: 11px; background: #000; }
.flow-card-label { margin-top: 14px; font-weight: 500; font-size: 30px; line-height: 42px; letter-spacing: var(--letter-spacing-base); }
.flow-note { margin: 13px 0 0; font-weight: 700; font-size: 20px; line-height: 46px; letter-spacing: var(--letter-spacing-base); color: #fff; }

.sites-section { container-type: inline-size; padding: 28px 0 199px; }
.site-card { flex: none; width: 382px; scroll-snap-align: start; }

.strengths-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 863px;
  padding: 205px 0 120px;
  background: var(--color-bg-light);
}
.strengths-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-bg-light) url("../../_images/business/index/strengths-img-1.webp") center / cover no-repeat;
  scale: 1;
  filter: contrast(1) saturate(1);
  transform-origin: 65% center;
  transition: scale 1s cubic-bezier(.16, 1, .3, 1), filter .7s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .strengths-banner:has(.btn:hover)::before { scale: 1.06; filter: contrast(1.14) saturate(1.12); }
}
.strengths-banner:has(.btn:focus-visible)::before { scale: 1.06; filter: contrast(1.14) saturate(1.12); }
.strengths-banner:has(.btn:active)::before { scale: 1.08; filter: contrast(1.18) saturate(1.15); transition-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  .strengths-banner::before { scale: 1 !important; transition: none; }
}
.strengths-banner-title { margin: 0; font-weight: 900; font-size: 45px; line-height: 78px; letter-spacing: var(--letter-spacing-base); position: relative; text-shadow: 0 0 32px rgba(255, 255, 255, .7); }
.strengths-banner-title::before { content: ""; position: absolute; inset: -90px -160px -100px -200px; z-index: -1; background: radial-gradient(closest-side, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, 0)); pointer-events: none; }
.strengths-banner-text { max-width: 616px; margin: 35px 0 0; font-weight: 500; font-size: 20px; line-height: 45px; letter-spacing: var(--letter-spacing-base); }
.strengths-banner .btn { margin-top: 67px; }

@media (max-width: 1280px) {
  .hero-business { min-height: 0; }
  .hero-business-catch { font-size: clamp(34px, 4.6vw, 61px); line-height: 1.78; }
  .hero-business-lead { margin-left: 80px; }
  .business-intro-body { grid-template-columns: minmax(0, 1fr) minmax(0, 45%); gap: 60px; }
  .business-index-inner { grid-template-columns: 260px minmax(0, 1fr); gap: 60px; }
  .products-banner-inner { left: 40px; }
}

@media (max-width: 1100px) {
  .hero-anchor-list { flex-wrap: wrap; }
  .btn-anchor { width: 300px; }
  .feature-list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 100px; }
  .feature-item { min-height: 0; padding: 40px 0 44px; border-top: 1px solid #191919; }
  .feature-item + .feature-item { padding-left: 0; }
  .feature-item + .feature-item::before { content: none; }
  .feature-num { top: 10px; left: auto; right: 0; font-size: 120px; }
  .feature-text { max-width: 600px; }
  .business-index-inner { grid-template-columns: minmax(0, 1fr); }
  .business-index-nav { display: none; }
  .products-banner { height: auto; }
  .products-banner-link { display: flex; flex-direction: column; }
  .products-banner-panel { position: relative; inset: auto; width: 100%; padding: 56px var(--gutter); }
  .products-banner-inner { position: static; }
  .products-banner-img { position: relative; top: auto; left: auto; width: auto; height: 260px; margin: 16px 0; object-fit: cover; object-position: left center; }
}

@media (max-width: 900px) {
  .hero-business { padding: 130px 0 70px; }
  .hero-business-catch { margin-top: 28px; padding-left: 28px; font-size: clamp(26px, 5.4vw, 44px); }
  .hero-business-catch::before { top: 12px; bottom: 10px; width: 8px; }
  .hero-business-lead { margin: 24px 0 0; font-size: 15px; line-height: 2.1; }
  .hero-business-lead br { display: none; }
  .hero-anchor-list { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 44px; }
  .btn-anchor { width: 100%; height: 64px; font-size: 16px; }
  .business-intro { padding: 120px 0 100px; }
  .business-intro-media { padding: 100px 0 90px; }
  .business-intro-body { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 50px; }
  .business-intro-text { padding-top: 0; }
  .business-intro-lead { font-size: 28px; line-height: 1.7; }
  .business-intro-desc { margin-top: 28px; font-size: 16px; line-height: 2.2; }
  .feature-title { font-size: 22px; line-height: 1.7; }
  .feature-text { margin-top: 16px; font-size: 16px; line-height: 2.1; }
  .feature-num { font-size: 96px; }
  .business-index { padding: 100px 0 120px; }
  .business-card + .business-card { margin-top: 56px; padding-top: 48px; }
  .business-card-head { margin-top: 28px; padding-left: 0; }
  .business-card-title { font-size: 23px; }
  .business-card-sub { font-size: 14px; }
  .business-card-text { min-height: 0; margin-top: 20px; font-size: 16px; line-height: 2.1; }
  .business-card-foot { margin-top: 28px; }
  .products-banner-title { font-size: 28px; line-height: 1.7; }
  .products-banner-more { font-size: 15px; gap: 20px; }
  .flow-section { padding: 100px 0 100px; }
  .flow-head-en { font-size: 20px; }
  .flow-head-ja { margin-top: 14px; font-size: 22px; line-height: 1.5; }
  .flow-slider { margin-top: 30px; }
  .flow-list, .site-card-list { gap: 16px; }
  .flow-card { width: 260px; height: 360px; padding: 44px 28px 0; }
  .flow-card-icon { width: 180px; height: auto; }
  .flow-card-num { font-size: 60px; }
  .flow-card-num::after { width: 100px; margin-top: 8px; }
  .flow-card-label { margin-top: 12px; font-size: 20px; line-height: 1.5; }
  .flow-note { font-size: 16px; line-height: 2; }
  .sites-section { padding: 20px 0 120px; }
  .site-slider { margin-top: 40px; }
  .site-card { width: 280px; }
  .site-card-logo { height: 150px; }
  .site-card-logo img { width: 260px; }
  .site-card-name { margin-top: 16px; padding: 0 8px 0 4px; font-size: 16px; }
  .site-card-name::before { width: 10px; height: 10px; margin-right: 12px; }
  .site-card-cat { margin-top: 22px; font-size: 15px; }
  .site-card-items { font-size: 12px; letter-spacing: var(--letter-spacing-base); }
  .strengths-banner { min-height: 0; padding: 110px 0 110px; }
  .strengths-banner-title { font-size: 28px; line-height: 1.7; }
  .strengths-banner-title br { display: none; }
  .strengths-banner-text { max-width: none; margin-top: 20px; font-size: 16px; line-height: 2; }
  .strengths-banner .btn { margin-top: 36px; }
}

@media (max-width: 700px) {
  .hero-business { padding: 110px 0 56px; }
  .hero-business-catch { padding-left: 22px; font-size: clamp(20px, 5.2vw, 30px); line-height: 1.75; letter-spacing: var(--letter-spacing-base); }
  .hero-business-catch::before { left: -12px; }
  .hero-business-lead { font-size: 14px; }
  .btn-anchor { height: 56px; padding: 0 48px 0 20px; border-radius: 28px; font-size: 14px; }
  .btn-anchor svg { right: 20px; width: 18px; height: 18px; }
  .business-intro { padding: 72px 0; }
  .business-intro-media { padding: 64px 0 72px; }
  .business-intro-lead { font-size: 22px; }
  .business-intro-desc { margin-top: 24px; font-size: 15px; line-height: 2; }
  .business-intro-body { margin-top: 32px; }
  .feature-list { margin-top: 48px; }
  .feature-en { font-size: 14px; }
  .feature-title { font-size: 19px; }
  .feature-text { font-size: 15px; }
  .feature-num { font-size: 72px; }
  .business-index { padding: 64px 0 72px; }
  .business-card-title { font-size: 19px; }
  .business-card-text { font-size: 15px; line-height: 2; }
  .products-banner-panel { padding: 44px var(--gutter); }
  .products-banner-title { font-size: 23px; }
  .products-banner-img { height: 180px; }
  .flow-section { padding: 64px 0; }
  .flow-head-ja { font-size: 19px; }
  .flow-card { width: 220px; height: 300px; padding: 34px 22px 0; border-radius: 12px; }
  .flow-card-icon { width: 150px; }
  .flow-card-num { margin-top: 14px; font-size: 48px; }
  .flow-card-label { font-size: 17px; }
  .flow-note { font-size: 14px; }
  .site-card { width: 240px; }
  .site-card-logo { height: 120px; }
  .site-card-logo img { width: 220px; }
  .strengths-banner { padding: 80px 0; }
  .strengths-banner-title { font-size: 22px; }
  .strengths-banner-text { font-size: 15px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.hero-detail {
  position: relative;
  min-height: 1000px;
  padding: 170px 0 80px;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--theme) 0%,
    color-mix(in srgb, var(--theme) 88%, #fff) 15%,
    color-mix(in srgb, var(--theme) 65%, #fff) 30%,
    color-mix(in srgb, var(--theme) 46%, #fff) 45%,
    color-mix(in srgb, var(--theme) 27%, #fff) 60%,
    color-mix(in srgb, var(--theme) 12%, #fff) 75%,
    #fefefe 90%, #f9faf9 100%);
}
.hero-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../_images/business/main-bg.webp") center top / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: .8;
  pointer-events: none;
}
.hero-detail > .inner-container { position: relative; z-index: 2; }
.hero-detail-wave {
  position: absolute;
  top: 0;
  left: calc(50% - 900px);
  z-index: 1;
  width: 1800px;
  height: 1000px;
  fill: none;
  stroke: #fffc2e;
  stroke-width: 10;
  stroke-linecap: round;
  pointer-events: none;
}
.hero-detail-img {
  position: absolute;
  top: var(--img-top);
  left: calc(50% - 600px + var(--img-left));
  z-index: 1;
  width: 660px;
  max-width: none;
  height: auto;
}
.business-display .hero-title-en, .business-merchandise .hero-title-en, .business-apparel .hero-title-en { letter-spacing: .1em; }
.hero-detail-catch { margin: 26px 0 0; font-weight: 900; font-size: 50px; line-height: 96px; letter-spacing: var(--letter-spacing-base); color: #484848; }
.hero-detail-lead { max-width: 720px; margin: 67px 0 0; font-weight: 500; font-size: 21px; line-height: 57px; letter-spacing: var(--letter-spacing-base); color: #484848; }
.hero-detail-web .hero-detail-lead { max-width: 660px; margin-top: 33px; color: var(--color-text); }

.works-section { container-type: inline-size; padding: 120px 0 129px; }
.works-slider {
  --slider-thumb: #c9c9c9;
  --slider-thumb-hover: #a6a6a6;
  --slider-pad: max(var(--gutter), calc((100% - var(--container)) / 2));
  position: relative;
  margin-top: 51px;
  padding-bottom: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--slider-pad);
  scrollbar-width: thin;
  scrollbar-color: var(--slider-thumb) transparent;
}
@supports selector(::-webkit-scrollbar) {
  .flow-slider, .site-slider, .works-slider { scrollbar-width: auto; scrollbar-color: auto; }
  .flow-slider::-webkit-scrollbar, .site-slider::-webkit-scrollbar, .works-slider::-webkit-scrollbar { height: 6px; }
  .flow-slider::-webkit-scrollbar-track, .site-slider::-webkit-scrollbar-track, .works-slider::-webkit-scrollbar-track { margin-inline: max(var(--gutter), calc((100cqw - var(--container)) / 2)); background: transparent; }
  .flow-slider::-webkit-scrollbar-thumb, .site-slider::-webkit-scrollbar-thumb, .works-slider::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--slider-thumb); }
  .flow-slider::-webkit-scrollbar-thumb:hover, .site-slider::-webkit-scrollbar-thumb:hover, .works-slider::-webkit-scrollbar-thumb:hover { background: var(--slider-thumb-hover); }
}
.works-slider:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.works-list { display: flex; gap: 42px; width: max-content; margin: 0; padding: 0 var(--slider-pad); list-style: none; }
.works-card { flex: none; width: 524px; scroll-snap-align: start; }
.works-card-img { margin: 0; overflow: hidden; border-radius: 8px; }
.works-card-img img { display: block; width: 100%; height: auto; }
.works-card-title { margin: 35px 0 0; font-weight: 900; font-size: 28px; line-height: 1.4; letter-spacing: var(--letter-spacing-base); }
.works-card-client { margin: 7px 0 0; padding: 14px 10px 11px; border-top: 1px solid #a3a3a3; border-bottom: 1px solid #a3a3a3; font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: var(--letter-spacing-base); }
.works-card-meta { display: flex; flex-wrap: wrap; margin: 0; padding: 12px 12px 0; font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: var(--letter-spacing-base); }
.works-card-meta span + span::before { content: "│"; margin: 0 1em; }

.usage-section { padding: 93px 0 144px; }
.usage-title { margin: 0; padding-bottom: 11px; border-bottom: 1px solid #191919; font-weight: 900; font-size: 52px; line-height: 87px; letter-spacing: var(--letter-spacing-base); }
.usage-group { margin-top: 59px; }
.usage-group + .usage-group { margin-top: 119px; }
.usage-desc { margin: 22px 0 0; font-weight: 400; font-size: 20px; line-height: 48px; letter-spacing: var(--letter-spacing-base); }
.usage-item-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 38px; margin: 40px 0 0; padding: 0; list-style: none; }
.usage-item-img { display: block; overflow: hidden; border: 1px solid #191919; border-radius: 10px; background: #fff; }
.usage-item-img img { display: block; width: 100%; height: auto; }
.usage-item-img img[src*="/item-blouson.webp"] { clip-path: inset(1.06% .75%); }
.usage-item-label { display: block; margin-top: 14px; font-weight: 700; font-size: 22px; line-height: 1.4; letter-spacing: var(--letter-spacing-base); }

.products-banner-sites { --banner-hover-color: #3478bf; }
.products-banner-sites .products-banner-panel { background: #4c68dd; }
.products-banner-sites .products-banner-more { width: auto; }
.products-banner-sites .products-banner-media { position: absolute; inset: 0; display: block; overflow: hidden; }
.products-banner-sites .products-banner-img { position: absolute; top: 0; left: min(0px, calc(50% - 904px)); width: max(1808px, 100%); height: 100%; margin: 0; object-fit: cover; object-position: right center; }

@media (max-width: 1100px) {
  .products-banner-sites .products-banner-media { position: relative; inset: auto; flex: none; width: 100%; height: 260px; }
  .products-banner-sites .products-banner-img { left: -60%; width: 160%; }
}

@media (max-width: 700px) {
  .products-banner-sites .products-banner-media { height: 180px; }
}

.approach-section { --approach-pad: 144px; position: relative; padding: var(--approach-pad) 0 202px; }
.business-web-operation .approach-section { --approach-pad: 106px; }
.approach-section::before {
  content: "";
  position: absolute;
  top: calc(var(--approach-pad) - 27px);
  bottom: 0;
  left: calc(50% - 600px + 104px);
  width: 10px;
  background: var(--accent);
}
.approach-title { margin: 0; padding-left: 176px; font-weight: 900; font-size: 52px; line-height: 87px; letter-spacing: var(--letter-spacing-base); }
.approach-list { margin: 101px 0 0; padding: 0 0 0 177px; list-style: none; }
.approach-item { position: relative; }
.approach-item + .approach-item { margin-top: 155px; }
.approach-item-title { position: relative; margin: 0; font-weight: 900; font-size: 42px; line-height: 50px; letter-spacing: var(--letter-spacing-base); color: var(--accent); }
.approach-item-title::before { content: ""; position: absolute; top: 6px; left: -86px; width: 37px; height: 37px; border-radius: 50%; background: var(--accent); }
.approach-item-sub { display: block; margin-top: 13px; padding-left: 19px; font-size: 21px; line-height: 29px; color: var(--color-text); }
.approach-item-text { max-width: 472px; margin: 24px 0 0; font-weight: 400; font-size: 20px; line-height: 45px; letter-spacing: var(--letter-spacing-base); }
.approach-item-img { position: absolute; top: -64px; left: 519px; width: 400px; height: auto; }
.business-web-operation .approach-item-img { top: -51px; left: 532px; }
.approach-section::before { background: #fff; }
.approach-progress { position: absolute; z-index: 1; pointer-events: none; }
.approach-progress::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--approach-distance, 0px); background: var(--accent); }
.approach-progress::after { content: ""; position: absolute; opacity: var(--approach-dot-opacity, 1); top: var(--approach-dot-distance, var(--approach-distance, 0px)); left: var(--approach-dot-left, 50%); width: var(--approach-dot-size, 37px); height: var(--approach-dot-size, 37px); border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%) scaleX(calc(1 - var(--approach-stretch, 0) * .35)) scaleY(calc(1 + var(--approach-stretch, 0))); }
.approach-section .approach-item-title::before { background: #fff; transition: none; }
.approach-section.has-approach-progress .approach-item-title.is-passed::before { background: var(--accent); }
.approach-section.has-approach-progress .is-approach-revealed .approach-item-title::before { animation: approach-marker-arrive .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes approach-marker-arrive {
  0%, 100% { transform: scale(1); }
  42% { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .approach-section.has-approach-progress .approach-item-title::before { transition: none; animation: none; }
  .approach-progress::after { transform: translate(-50%, -50%); }
}
@media print {
  .approach-progress { display: none; }
  .approach-section::before, .approach-section.has-approach-progress .approach-item-title::before { background: var(--accent); }
}

.flow-section-web { padding-bottom: 219px; background: var(--accent); }
.flow-section-web .flow-card { padding-top: 27px; }
.flow-section-web .flow-card-num { margin-top: -2px; }
.flow-section-web .flow-card-label { margin-top: 15px; }
.flow-card-text { margin-top: 8px; font-weight: 400; font-size: 21px; line-height: 42px; letter-spacing: var(--letter-spacing-base); }

.other-business { padding: 78px 0 107px; background: var(--color-bg-light); }
.business-detail .contact-banner { padding-top: 167px; }

@media (min-width: 1281px) {
  .flow-list { width: auto; gap: 20px; }
  .flow-card { flex: 1 1 0; min-width: 0; width: auto; height: auto; padding: 40px 24px 36px; }
  .flow-card-icon { width: 100%; max-width: 180px; height: auto; }
  .flow-card-num { margin-top: 16px; font-size: 56px; }
  .flow-card-num::after { width: 96px; margin-top: 8px; }
  .flow-card-label { margin-top: 12px; font-size: 20px; line-height: 1.5; }
  .flow-section-web .flow-card { padding-top: 32px; }
  .flow-section-web .flow-card-num { margin-top: 12px; }
  .flow-section-web .flow-card-label { margin-top: 12px; }
  .flow-card-text { margin-top: 8px; font-size: 16px; line-height: 1.9; }
  .works-list { width: auto; gap: 30px; }
  .works-card { flex: 1 1 0; min-width: 0; width: auto; }
  .works-card-title { margin-top: 24px; font-size: 22px; }
  .works-card-client, .works-card-meta { font-size: 17px; }
  .works-card-meta { margin-left: calc(12px - 2.4em); padding-left: 0; clip-path: inset(0 0 0 2.4em); }
  .works-card-meta span::before, .works-card-meta span + span::before { content: "│"; display: inline-block; width: 2.4em; margin: 0; text-align: center; }
}

@media (max-width: 1280px) {
  .hero-detail-img { left: auto; right: max(-40px, calc(50% - 760px)); width: 560px; }
  .hero-detail-lead, .hero-detail-web .hero-detail-lead { max-width: 52%; }
  .approach-item-img, .business-web-operation .approach-item-img { left: auto; right: 0; width: 320px; }
  .approach-section::before { left: calc(var(--gutter) + 104px); }
}

@media (max-width: 1100px) {
  .hero-detail-img { top: 140px; width: 440px; }
  .usage-item-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .approach-item-text { max-width: calc(100% - 340px); }
}

@media (max-width: 900px) {
  .hero-detail { display: flex; flex-direction: column; min-height: 0; padding: 130px 0 0; }
  .hero-detail > .inner-container { width: min(var(--container), 100% - var(--gutter) * 2); }
  .hero-detail-img { position: relative; top: auto; right: auto; left: auto; order: 1; display: block; width: min(420px, 82%); margin: 10px auto 0; }
  .hero-detail-catch { font-size: clamp(24px, 5.2vw, 40px); line-height: 1.8; }
  .hero-detail-lead, .hero-detail-web .hero-detail-lead { max-width: none; margin-top: 24px; font-size: 15px; line-height: 2.1; }
  .works-section { padding: 90px 0; }
  .works-slider { margin-top: 32px; }
  .works-list { gap: 20px; }
  .works-card { width: 300px; }
  .works-card-title { margin-top: 20px; font-size: 19px; }
  .works-card-client, .works-card-meta { font-size: 15px; }
  .works-card-client { padding: 10px 6px 8px; }
  .works-card-meta { padding: 10px 6px 0; }
  .usage-section { padding: 80px 0 100px; }
  .usage-title { font-size: 30px; line-height: 1.6; }
  .usage-group { margin-top: 44px; }
  .usage-group + .usage-group { margin-top: 70px; }
  .usage-desc { margin-top: 14px; font-size: 15px; line-height: 2; }
  .usage-item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 24px; }
  .usage-item-label { margin-top: 8px; font-size: 15px; }
  .approach-section, .business-web-operation .approach-section { --approach-pad: 90px; padding-bottom: 110px; }
  .approach-section::before { left: calc(var(--gutter) + 12px); width: 6px; }
  .approach-title { padding-left: 50px; font-size: 28px; line-height: 1.6; }
  .approach-list { margin-top: 56px; padding-left: 50px; }
  .approach-item + .approach-item { margin-top: 70px; }
  .approach-item-title { font-size: 26px; line-height: 36px; }
  .approach-item-title::before { top: 6px; left: -47px; width: 24px; height: 24px; }
  .approach-item-sub { margin-top: 8px; padding-left: 0; font-size: 16px; line-height: 1.6; }
  .approach-item-text { max-width: none; margin-top: 14px; font-size: 15px; line-height: 2; }
  .approach-item-img, .business-web-operation .approach-item-img { position: static; display: block; width: min(260px, 70%); margin-top: 16px; }
  .flow-section-web { padding-bottom: 100px; }
  .flow-section-web .flow-card { padding-top: 20px; }
  .flow-card-text { margin-top: 6px; font-size: 14px; line-height: 1.8; }
  .other-business { padding: 70px 0 80px; }
  .business-detail .contact-banner { padding-top: 100px; }
}

@media (max-width: 700px) {
  .hero-detail { padding-top: 110px; }
  .hero-detail-catch { font-size: clamp(20px, 5.6vw, 26px); letter-spacing: var(--letter-spacing-base); }
  .hero-detail-lead, .hero-detail-web .hero-detail-lead { font-size: 14px; }
  .works-card { width: min(260px, 82vw); }
  .works-section { padding: 64px 0; }
  .works-card-title { line-height: 1.6; }
  .works-card-client, .works-card-meta { line-height: 1.8; }
  .usage-section { padding: 64px 0 72px; }
  .usage-group { margin-top: 32px; }
  .usage-group + .usage-group { margin-top: 48px; }
  .usage-item-label { font-size: 14px; line-height: 1.6; }
  .usage-title { font-size: 23px; }
  .approach-section, .business-web-operation .approach-section { --approach-pad: 64px; padding-bottom: 72px; }
  .approach-section::before { left: calc(var(--gutter) + 8px); width: 4px; }
  .approach-title { padding-left: 36px; font-size: 22px; }
  .approach-list { margin-top: 36px; padding-left: 36px; }
  .approach-item + .approach-item { margin-top: 48px; }
  .approach-item-title { font-size: 22px; line-height: 1.6; }
  .approach-item-title::before { top: 8px; left: -36px; width: 20px; height: 20px; }
  .approach-item-sub { font-size: 15px; }
  .sites-section { padding-bottom: 72px; }
  .site-slider { margin-top: 32px; }
  .site-card-items { font-size: 14px; line-height: 1.8; }
  .strengths-banner { padding: 72px 0; }
  .strengths-banner-title { font-size: 24px; }
  .strengths-banner-text { font-size: 15px; }
  .other-business { padding: 64px 0 72px; }
  .flow-section-web { padding-block: 64px; }
}

@media (min-width: 701px) and (max-width: 1280px) {
  .business-intro, .business-intro-media, .business-index { padding-block: 80px 96px; }
  .business-intro-text { padding-top: 0; }
  .business-intro-lead { font-size: 30px; line-height: 1.8; }
  .business-intro-desc { margin-top: 28px; font-size: 16px; line-height: 2; }
  .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
  .feature-item, .feature-item + .feature-item { min-height: 0; padding: 40px 0 24px; border-top: 1px solid #191919; }
  .feature-item + .feature-item::before { content: none; }
  .feature-num { top: -12px; left: auto; right: 0; font-size: 90px; }
  .feature-title { font-size: 24px; line-height: 1.8; }
  .feature-text { margin-top: 20px; font-size: 16px; line-height: 2; }
  .business-index-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .business-index-nav { position: static; }
  .business-index-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
  .business-index-link { min-height: 64px; padding: 12px 16px; font-size: 16px; line-height: 1.6; }
  .business-card + .business-card { margin-top: 64px; padding-top: 48px; }
  .business-card-title { font-size: 28px; line-height: 1.6; }
  .works-section { padding-block: 80px; }
  .works-card { width: 320px; }
  .works-card-title { font-size: 20px; line-height: 1.6; }
  .usage-section { padding-block: 80px 96px; }
  .usage-title { font-size: 34px; line-height: 1.6; }
  .usage-desc { font-size: 16px; line-height: 2; }
  .usage-item-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .usage-item-label { font-size: 16px; line-height: 1.6; }
  .approach-section, .business-web-operation .approach-section { --approach-pad: 80px; padding-bottom: 96px; }
  .approach-section::before { left: calc(var(--gutter) + 12px); width: 6px; }
  .approach-title { padding-left: 52px; font-size: 32px; line-height: 1.6; }
  .approach-list { margin-top: 48px; padding-left: 52px; }
  .approach-item + .approach-item { margin-top: 64px; }
  .approach-item-title { font-size: 28px; line-height: 1.6; }
  .approach-item-title::before { top: 10px; left: -48px; width: 24px; height: 24px; }
  .approach-item-sub { padding-left: 0; font-size: 17px; line-height: 1.6; }
  .approach-item-text { font-size: 16px; line-height: 2; }
  .flow-section-web { padding-bottom: 96px; }
  .flow-card { width: 300px; height: auto; min-height: 430px; padding: 32px 32px 40px; }
  .flow-card-icon { width: 220px; height: auto; }
  .flow-card-num { font-size: 68px; }
  .flow-card-label { font-size: 22px; line-height: 1.6; }
  .flow-card-text { font-size: 16px; line-height: 1.9; }
  .sites-section { padding-bottom: 96px; }
  .other-business { padding-block: 80px 96px; }
  .hero-business-catch { padding-left: 48px; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.8; }
  .hero-business-catch::before { top: 12px; bottom: 10px; width: 8px; }
  .hero-business-lead { max-width: 52em; margin: 24px 0 0 48px; font-size: 16px; line-height: 2; }
  .hero-anchor-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .btn-anchor { width: 100%; height: auto; min-height: 72px; padding: 12px 40px 12px 16px; font-size: 16px; line-height: 1.6; text-wrap: balance; }
  .btn-anchor svg { right: 16px; width: 18px; height: 18px; }
  .business-index-nav { display: block; }
  .business-intro, .strengths-banner { scroll-margin-top: 128px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .approach-item-text { max-width: calc(100% - 292px); }
  .approach-item-img, .business-web-operation .approach-item-img { top: 0; width: 260px; }
}

.business-detail .hero-detail { isolation: isolate; background: linear-gradient(180deg, var(--theme) 0%, #fff var(--hero-fade, 89%), #fff 100%); }
.business-detail .hero-detail::before { mix-blend-mode: multiply; opacity: .65; }
.business-detail .hero-detail > .inner-container { z-index: auto; }
.business-detail .page-hero-head { position: relative; border-bottom-color: transparent; }
.business-detail .page-hero-head::before { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; z-index: 0; height: 2px; background: #fff; }
.business-detail .page-hero-head > span, .business-detail .hero-detail-catch, .business-detail .hero-detail-lead { position: relative; z-index: 4; }
.business-detail .hero-detail-products { --hero-unit: 1px; z-index: auto; aspect-ratio: 660 / 740; pointer-events: none; }
.business-detail .hero-detail-product { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: none; }
.business-detail .hero-detail-product.has-shadow { filter: drop-shadow(calc(var(--shadow-x) * var(--hero-unit)) calc(var(--shadow-y) * var(--hero-unit)) calc(var(--shadow-blur) * var(--hero-unit)) rgba(4, 0, 0, var(--shadow-opacity))); }
.business-detail .hero-detail-product-back { z-index: 1; }
.business-detail .hero-detail-wave { z-index: 2; max-width: none; }
.business-detail .hero-detail > .hero-detail-wave { top: 0; left: 0; width: 100vw; height: 100%; }
.business-detail .hero-detail-wave-compact { display: none; top: calc(100% - var(--wave-height, 64px) * .6); left: calc(-1 * var(--gutter)); width: 100vw; height: var(--wave-height, 64px); stroke-width: 6; }
.business-detail .hero-detail-wave-compact path { vector-effect: non-scaling-stroke; }
.business-detail .hero-detail-product-front { z-index: 3; }
.business-detail .hero-detail-catch-line, .business-detail .hero-detail-lead-line { display: block; }

@media (max-width: 1280px) {
  .business-detail .hero-detail-products { --hero-unit: .8484848485px; }
}
@media (max-width: 1100px) {
  .business-detail .hero-detail-products { --hero-unit: .6666666667px; }
}
@media (max-width: 900px) {
  .business-detail .hero-detail-sp { --wave-height: clamp(64px, 10vw, 90px); }
  .business-detail .hero-detail-products { --hero-unit: min(.6363636364px, .1242424242vw); }
  .business-detail .hero-detail > .hero-detail-wave { display: none; }
  .business-detail .hero-detail-wave-compact { display: block; }
  .business-detail .hero-detail-catch-line { position: relative; z-index: 3; }
  .business-detail .hero-detail-sp .hero-detail-lead { margin-top: 32px; }
}

@media (max-width: 700px) {
  .business-detail .hero-detail-wave-compact { stroke-width: 4; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .page-lower .business-detail .page-hero-head,
  .js .page-lower .business-detail .hero-detail-catch,
  .js .page-lower .business-detail .hero-detail-lead,
  .js .page-lower .business-detail .hero-detail-products { opacity: 1; translate: none; transition: none; }
  .js .page-lower .business-detail .page-hero-head > span,
  .js .page-lower .business-detail .hero-detail-catch-line,
  .js .page-lower .business-detail .hero-detail-lead-line { opacity: 0; translate: -28px 0; clip-path: inset(0 100% 0 0); transition: opacity .65s var(--ease), translate .8s var(--ease), clip-path .9s var(--ease); }
  .js .page-lower .business-detail .page-hero-head > .hero-title { transition-delay: .28s; }
  .js .page-lower .business-detail .hero-detail-catch-line { transition-delay: .65s; }
  .js .page-lower .business-detail .hero-detail-catch-line + .hero-detail-catch-line { transition-delay: 1.02s; }
  .js .page-lower .business-detail .hero-detail-lead-line { transition-delay: 1.4s; }
  .js .page-lower .business-detail .hero-detail-lead-line + .hero-detail-lead-line { transition-delay: 1.65s; }
  .js.is-loaded .page-lower .business-detail .page-hero-head > span,
  .js.is-loaded .page-lower .business-detail .hero-detail-catch-line,
  .js.is-loaded .page-lower .business-detail .hero-detail-lead-line { opacity: 1; translate: none; clip-path: inset(0 0 0 0); }
  .js .page-lower .business-detail .page-hero-head::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .2s; }
  .js.is-loaded .page-lower .business-detail .page-hero-head::before { transform: scaleX(1); }
  .js .page-lower .business-detail .hero-detail-product { opacity: 0; transition: opacity .9s var(--ease) .18s; }
  .js.is-loaded .page-lower .business-detail .hero-detail-product { opacity: 1; }
  .js .page-lower .business-detail .hero-detail-wave path { stroke-dasharray: 1; stroke-dashoffset: -1; transition: stroke-dashoffset 1.5s cubic-bezier(.5, .08, .8, .45) .55s; }
  .js .page-lower .business-detail .hero-detail-wave-compact path { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s var(--ease) 1.15s; }
  .js.is-loaded .page-lower .business-detail .hero-detail-wave path { stroke-dashoffset: 0; }
  .js.is-loaded .page-lower .business-detail .hero-detail-wave-compact path { opacity: 1; }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .js .page-lower .business-detail .hero-detail-wave-compact path { transition-duration: .95s; transition-delay: 1.05s; }
  .js .page-lower .business-detail .hero-detail-sp .hero-detail-lead-line { transition-delay: 1.2s; }
  .js .page-lower .business-detail .hero-detail-sp .hero-detail-lead-line + .hero-detail-lead-line { transition-delay: 1.45s; }
}

@media print {
  .js .page-lower .business-detail .page-hero-head > span,
  .js .page-lower .business-detail .hero-detail-catch-line,
  .js .page-lower .business-detail .hero-detail-lead-line,
  .js .page-lower .business-detail .hero-detail-product { opacity: 1; translate: none; clip-path: none; transition: none; }
  .js .page-lower .business-detail .page-hero-head::before { transform: none; transition: none; }
  .js .page-lower .business-detail .hero-detail-wave path { stroke-dashoffset: 0; transition: none; }
}

.business-web-production .web-hero { z-index: 3; }
.web-hero-part { position: absolute; inset: 0; z-index: 4; transform-origin: var(--part-origin-x) var(--part-origin-y); }
.web-hero-part > img, .web-hero-part > svg { display: block; width: 100%; height: 100%; max-width: none; }
.web-hero-computer { z-index: 2; }
.web-hero-product { z-index: 3; }
.web-hero-back { z-index: 1; }
.web-hero-screen { position: absolute; top: 56.62%; left: 33.03%; width: 40.91%; height: 21.62%; overflow: hidden; }
.web-hero-screen::after { content: ""; position: absolute; inset: -20% -35%; opacity: 0; background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.04) 60%, transparent 66%); }

@media screen and (prefers-reduced-motion: no-preference) {
  .js .web-hero-part { opacity: 0; }
  .js .is-web-hero-ready .web-hero-computer { animation: web-computer-enter var(--part-duration) cubic-bezier(.16, 1, .3, 1) var(--part-delay) both; }
  .js .is-web-hero-ready .web-hero-product { animation: web-product-launch var(--part-duration) cubic-bezier(.22, .65, .22, 1) var(--part-delay) both; }
  .js .is-web-hero-ready .web-hero-confetti { animation: web-confetti-enter var(--part-duration) cubic-bezier(.18, .72, .22, 1) var(--part-delay) both; }
  .js .is-web-hero-ready .web-hero-screen::after { animation: web-screen-light .9s ease-in-out .62s both; }
  .js .is-web-hero-ready .web-hero-drift > svg { transform-origin: var(--part-origin-x) var(--part-origin-y); animation: web-confetti-drift var(--drift-duration) ease-in-out calc(var(--part-delay) + var(--part-duration)) 2; }
  .js .is-web-hero-ready:not(.is-web-hero-playing) .web-hero-drift > svg { animation-play-state: paused; }
  @keyframes web-computer-enter {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes web-product-launch {
    0% { opacity: 0; transform: translate(var(--launch-x), var(--launch-y)) scale(.12) rotate(-6deg); }
    14% { opacity: 1; }
    100% { opacity: 1; transform: none; }
  }
  @keyframes web-confetti-enter {
    from { opacity: 0; transform: translate(calc(var(--launch-x) * .13), calc(var(--launch-y) * .13)) scale(.65) rotate(-13deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes web-screen-light {
    0% { opacity: 0; transform: translateX(-85%); }
    18%, 72% { opacity: 1; }
    100% { opacity: 0; transform: translateX(85%); }
  }
  @keyframes web-confetti-drift {
    0%, 100% { transform: none; }
    50% { transform: translate(var(--drift-x), var(--drift-y)) rotate(var(--drift-turn)); }
  }
}

.approach-item-copy { display: block; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .has-approach-progress .approach-item-copy,
  .js .has-approach-progress .approach-item-text { opacity: 0; translate: -14px 0; transition: opacity .44s cubic-bezier(.2, .75, .2, 1), translate .5s cubic-bezier(.2, .75, .2, 1); }
  .js .has-approach-progress .is-approach-revealed .approach-item-copy,
  .js .has-approach-progress .is-approach-revealed .approach-item-text { opacity: 1; translate: none; }
}

.business-web-operation .web-hero { z-index: 3; }
.business-web-operation .web-hero-computer { transform-origin: 48.79% 74.73%; }
.business-web-operation .web-hero-keyboard,
.business-web-operation .web-hero-mouse { z-index: 2; }
.business-web-operation .web-hero-screen { top: 25.54%; left: 14.39%; width: 68.79%; height: 35.54%; }

@media screen and (prefers-reduced-motion: no-preference) {
  .js .business-web-operation .is-web-hero-ready .web-hero-computer { animation-name: web-operation-computer-enter; }
  .js .business-web-operation .is-web-hero-ready .web-hero-keyboard { animation: web-operation-keyboard-enter var(--part-duration) cubic-bezier(.16, 1, .3, 1) var(--part-delay) both; }
  .js .business-web-operation .is-web-hero-ready .web-hero-mouse { animation: web-operation-mouse-enter var(--part-duration) cubic-bezier(.16, 1, .3, 1) var(--part-delay) both; }
  .js .business-web-operation .is-web-hero-ready .web-hero-screen::after { animation-duration: .8s; animation-delay: .5s; }
  @keyframes web-operation-computer-enter {
    from { opacity: 0; transform: perspective(900px) translateY(28px) rotateX(7deg) scale(.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes web-operation-keyboard-enter {
    from { opacity: 0; transform: translate(-14px, 12px) scale(.95); }
    to { opacity: 1; transform: none; }
  }
  @keyframes web-operation-mouse-enter {
    from { opacity: 0; transform: translate(12px, 12px) scale(.95); }
    to { opacity: 1; transform: none; }
  }
}