.sec-solution {
  
  --sol-panel-h: 572px;
  --sol-panel-r: 18px; 
  --sol-panel-overlap: -56px; 
  --sol-pill-border: #d2d2d2; 
  
  --sol-en-fs: 92px;

  position: relative;
  z-index: 1; 
  padding-top: 1px; 

}

.sec-solution .sec-head {
  margin-bottom: 22px; 
}

.sec-solution .sec-head__ja {
  line-height: 64px; 
  letter-spacing: 0; 
  color: var(--text-strong);
}

.sec-solution .sec-head__en {
  display: flex;
  align-items: center;
  height: 65px;
  font-size: var(--sol-en-fs);
  line-height: 1;
  letter-spacing: 0;
}

.sec-solution__panel {
  position: relative;
  z-index: 1;
  height: var(--sol-panel-h);
  margin-bottom: var(--sol-panel-overlap);
  overflow: hidden; 
  border-radius: var(--sol-panel-r);
  
  background: url("../assets/img/solution-panel-bg.webp") no-repeat 0 -80px /
    100% auto;
  background-color: #b6bcc4;
}

.sec-solution__mesh {
  position: absolute;
  top: 0;
  left: 490px; 
  width: 824px;
  height: 538px;
  object-fit: fill;
}

.sec-solution__circles {
  position: absolute;
  top: 42.59px; 
  left: 533.84px; 
  width: 888.75px;
  height: 470.42px;
}

.js .sec-solution__circle {
  opacity: 0;
  transform: scale(0.86);
  transform-origin: center;
  transform-box: fill-box; 
  transition: opacity var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
  transition-delay: calc(var(--i) * var(--step-reveal) * 2);
}

.js .sec-solution__panel.is-in .sec-solution__circle {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .sec-solution__circle {
    opacity: 1;
    transform: none;
  }
}

.sec-solution__inner {
  position: relative; 
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding-left: 80px; 
}

.sec-solution__lead {
  flex: none;
  width: 467px;
  margin-top: 183px; 
}

.sec-solution__lead-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 0;
  color: var(--text-strong);
}

.sec-solution__lead-text {
  margin-top: 15px; 
  font-size: var(--fs-xs); 
  font-weight: 700; 
  line-height: 24px;
  color: var(--text);
}

.sec-solution__flow {
  flex: 0 1 720px;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  width: 720px; 
  max-width: 100%;
  margin-top: 193px; 
  margin-left: 31px; 
}

.sec-solution__step {
  flex: none;
  text-align: center;
}

.sec-solution__step--before {
  width: 112px;
  margin-top: 43px; 
}

.sec-solution__step--now {
  width: 206px;
  margin-top: 18px; 
  margin-left: 14.61px;
}

.sec-solution__step--after {
  width: 276px; 
  margin-left: 12.61px;
}

.sec-solution__arrow {
  flex: none;
  width: 41.39px;
  height: 8.86px;
  margin-top: 73.57px; 
  color: var(--text-strong);
}

.sec-solution__step--before + .sec-solution__arrow {
  margin-left: 3px;
}

.sec-solution__step--now + .sec-solution__arrow {
  margin-left: 13px;
}

.sec-solution__step-label {
  
  font-size: 12px;
  line-height: 17px;
  color: var(--text);
}

.sec-solution__step-title {
  
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--text-strong);
}

.sec-solution__step-note {
  
  margin-top: 9px; 
  font-size: 12px;
  line-height: 17px;
  color: var(--text);
}

.sec-solution__step-lead {
  
  font-size: var(--fs-xs); 
  line-height: 22px;
  color: var(--text);
}

.sec-solution__step--after .sec-solution__step-lead {
  
  font-size: 12px;
  line-height: 19px;
}

.sec-solution__logo {
  display: block;
  width: 206px; 
  height: 56px;
  margin: 8px auto 0; 
}

.sec-solution__pills {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 20px 0 0 10px; 
}

.sec-solution__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 85px;
  height: 45px;
  padding-inline: 5px;
  border: 1px solid var(--sol-pill-border);
  border-radius: 6px;
  background: var(--surface);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px; 
  color: var(--text-strong);
  text-align: center;
}

.sec-solution__cross {
  flex: none;
  width: 10px;
  height: 10px;
}

.sec-solution__step-headline {
  
  margin-top: 7px; 
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  
  white-space: nowrap;
  color: var(--text-strong);
}

.sec-solution__step-text {
  width: 208px;
  margin: 10px auto 0; 
  font-size: 12px;
  line-height: 20px;
  text-align: left;
  color: var(--text);
}

.sec-solution__accent {
  color: var(--aixeed-green);
}

@media (min-width: 768px) and (max-width: 1100px) {
  .sec-solution__panel {
    height: auto;
    margin-bottom: 0;
    background-position: center;
    background-size: cover;
  }

  .sec-solution__mesh,
  .sec-solution__circles {
    display: none;
  }

  .sec-solution__inner {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 48px 24px;
  }

  .sec-solution__lead {
    width: 100%;
    max-width: 467px;
    margin-top: 0;
  }

  .sec-solution__lead-title {
    font-size: 26px;
    line-height: 1.5;
  }

  .sec-solution__flow {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 40px 0 0;
  }

  .sec-solution__step,
  .sec-solution__step--before,
  .sec-solution__step--now,
  .sec-solution__step--after {
    width: 100%;
    max-width: 320px;
    margin-top: 0;
    margin-left: 0;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
  }

  .sec-solution__step + .sec-solution__arrow,
  .sec-solution__arrow {
    margin: 12px 0;
    transform: rotate(90deg);
  }

  .sec-solution__step--before + .sec-solution__arrow,
  .sec-solution__step--now + .sec-solution__arrow {
    margin-left: 0;
  }

  .sec-solution__pills {
    justify-content: center;
    margin-left: 0;
  }

  .sec-solution__step-text {
    width: 100%;
  }

  .sec-solution__step-headline {
    font-size: 22px;
    line-height: 1.4;
    white-space: normal;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .sec-solution .sec-head__ja {
    font-size: 28px;
    line-height: 1.4;
  }

  .sec-solution .sec-head__en {
    display: none;
  }
}

@media (max-width: 1365px) and (min-width: 1100px) {
  .sec-solution__inner {
    padding-left: clamp(24px, 5.86vw, 80px);
  }

  .sec-solution__lead {
    min-width: 0;
    flex: 1 1 auto;
  }

  .sec-solution__flow {
    flex: 0 0 720px;
    margin-left: clamp(8px, 2.27vw, 31px);
  }
}

.sec-solution__sp-bg,
.sec-solution__sp-circles {
  display: none;
}

@media (max-width: 767px) {
  .sec-solution {
    padding-top: 56px;
  }

  
  .sec-solution .sec-head {
    margin-bottom: 0;
  }

  .sec-solution .sec-head__ja {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  

  .sec-solution__panel {
    height: auto;
    margin-bottom: -53px; 
    border-radius: 8px; 
    background: #d9d9d9; 
  }

  .sec-solution__mesh,
  .sec-solution__circles {
    display: none; 
  }

  .sec-solution__sp-bg,
  .sec-solution__sp-circles {
    display: block;
    position: absolute;
    left: 50%;
    max-width: none; 
    pointer-events: none;
  }

  
  .sec-solution__sp-bg {
    top: -240px;
    left: -39.601%; 
    width: 179.202%; 
    height: calc(100% + 240px); 
    margin-left: 0;
    object-fit: cover;
    object-position: center;
  }

  
  .sec-solution__sp-circles {
    top: 291px;
    margin-left: -205.5px; 
    width: 438px;
    height: 797px;
  }

  

  .sec-solution__inner {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    
    padding: 49.3px 12px 19px;
  }

  
  .sec-solution__lead {
    width: 100%;
    max-width: none;
    min-height: 334.7px; 
    margin-top: 0;
  }

  .sec-solution__lead-title {
    font-size: 20px;
    line-height: 28.96px;
  }

  .sec-solution__lead-text {
    margin-top: 6.84px; 
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }

  
  .sec-solution__lead-text br {
    display: none;
  }

  .sec-solution__lead-pc {
    display: none;
  }

  

  .sec-solution__flow {
    
    flex: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .sec-solution__step,
  .sec-solution__step--before,
  .sec-solution__step--now,
  .sec-solution__step--after {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .sec-solution__step--before {
    margin-top: 0;
  }

  .sec-solution__step--now {
    margin-top: 22.65px; 
  }

  .sec-solution__step--after {
    margin-top: 17.6px; 
  }

  
  .sec-solution__arrow,
  .sec-solution__step--before + .sec-solution__arrow,
  .sec-solution__step--now + .sec-solution__arrow {
    width: 41.4px;
    height: 41.4px;
    margin-left: 0;
    transform: rotate(90deg);
  }

  .sec-solution__step--before + .sec-solution__arrow {
    margin-top: 16.25px; 
  }

  .sec-solution__step--now + .sec-solution__arrow {
    margin-top: 11px; 
  }

  

  .sec-solution__step-label {
    font-size: 12px;
    line-height: 17.376px;
  }

  .sec-solution__step-title {
    font-size: 18px;
    line-height: 30px;
  }

  .sec-solution__step-note {
    margin-top: 0;
    font-size: 12px;
    line-height: 17.376px;
  }

  .sec-solution__step-lead {
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 0.72px;
  }

  .sec-solution__step--after .sec-solution__step-lead {
    font-size: 12px;
    line-height: 19px;
    letter-spacing: 0;
  }

  .sec-solution__logo {
    width: 176px;
    height: 47.9px;
    margin-top: 7.1px; 
  }

  .sec-solution__pills {
    justify-content: center;
    margin: 12px 0 0; 
  }

  
  .sec-solution__pill {
    width: 90px;
    height: 49px;
    padding-inline: 6px;
    border-radius: 8px;
    background: none;
  }

  .sec-solution__cross {
    width: 9.5px;
    height: 9.5px;
  }

  .sec-solution__step-headline {
    margin-top: 1px; 
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.84px;
    white-space: normal;
  }

  .sec-solution__step-text {
    width: 276px;
    max-width: 100%;
    margin-top: 7px; 
    font-size: 12px;
    line-height: 20px;
  }

  
  .sec-solution__accent {
    color: inherit;
  }
}