/* PC 端「解决方案」页面专属样式，只被 solutions.html 引用 */

.pain {
  --pain-scale: 1;
  height: calc(34.375rem * var(--pain-scale));
}

.pain__stage {
  width: 90rem;
  height: 34.375rem;
  margin-left: calc(50% - 45rem);
  position: relative;
}

.pain__tag {
  color: #555;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 1.625rem;
  height: 3.25rem;
  padding: 0 1.5rem;
  font-size: 1.375rem;
  line-height: 3.25rem;
  position: absolute;
  transform: translate(-50%,-50%);
  box-shadow: 0 4px 16px #28468214;
}

.pain__card {
  background-size: cover;
  border: 1px solid #e3eaf5;
  border-radius: .25rem;
  justify-content: center;
  align-items: center;
  width: 19.125rem;
  height: 11.5rem;
  display: flex;
  position: absolute;
  top: 13.3125rem;
  left: 36.0625rem;
  box-shadow: 0 6px 20px #2846821a;
  background-image: url("../image/solution-pain.png");
}

.pain__title {
  color: #1d4fa5;
  font-size: 2.25rem;
  font-weight: 700;
}

.needs {
  height: 35.75rem;
  padding-top: 5.375rem;
}

.needs__grid {
  grid-template-columns: repeat(3,23.5625rem);
  gap: 2.125rem;
  margin-top: 4.125rem;
  margin-left: 2px;
  display: grid;
}

.need-card {
  height: 13.125rem;
  transition: box-shadow var(--site-duration) var(--site-ease);
  background: linear-gradient(#f8fbff 0%,#f1f6fe 100%);
  border: 1px solid #eaf0fa;
  border-color: #dbe4f3 #eaf0fa #eaf0fa #dbe4f3;
  border-radius: 2.25rem .625rem .625rem;
  padding: 2rem 2.5rem 0;
  position: relative;
  overflow: hidden;
}

.need-card__icon {
  top: var(--top);
  left: var(--left);
  transition: transform var(--site-duration-slow) var(--site-ease);
  position: absolute;
}

@media (hover:hover) {
  .need-card:hover {
    box-shadow: var(--site-shadow-md);
  }

  .need-card:hover .need-card__icon {
    transform: translateY(-.25rem);
  }
}

.need-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.need-card__desc {
  color: #777;
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.625rem;
  position: relative;
}

.detail {
  background-color: #f7faff;
  height: 57rem;
  padding-top: 7.6875rem;
}

.detail-card {
  background-color: #fff;
  border-radius: 1.25rem;
  justify-content: space-between;
  height: 32.5625rem;
  margin-top: 4.0625rem;
  padding: 3.5625rem 3.9375rem 0 3.625rem;
  display: flex;
  box-shadow: 0 10px 30px #1e3c780d;
}

.detail-card__content {
  width: 32.25rem;
  padding-top: .1875rem;
}

.detail-card__title {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 2.25rem;
}

.detail-card__title em {
  color: #1a5be0;
  font-style: normal;
}

.detail-card__tags {
  color: #2a6be8;
  gap: 1.125rem;
  margin: .875rem 0 0;
  padding: 0;
  font-size: .875rem;
  line-height: 1.25rem;
  list-style: none;
  display: flex;
}

.detail-card__tags li {
  align-items: center;
  gap: .25rem;
  width: 4.5625rem;
  display: flex;
}

.detail-card__block {
  margin-top: 2.625rem;
}

.detail-card__block+.detail-card__block {
  margin-top: 1.875rem;
}

.detail-card__block h4 {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.375rem;
}

.detail-card__block p {
  color: var(--site-text-regular);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: .375rem;
  font-size: .8125rem;
  line-height: 1.1875rem;
  display: -webkit-box;
  overflow: hidden;
}

.detail-card__image {
  object-fit: cover;
  border-radius: .875rem;
  width: 31.8125rem;
  height: 23.25rem;
}

.solution-page {
  position: relative;
  overflow: hidden;
}

.solution-page__band {
  clip-path: polygon(0 40.06%,100% 0,100% 59.45%,0 100%);
  background-color: #f7faff;
  width: 100%;
  height: 38.6875rem;
  position: absolute;
  top: 24.625rem;
  left: 0;
}

.scene {
  height: 62.5rem;
  padding-top: 3.8125rem;
  position: relative;
}

.scene__tabs {
  justify-content: center;
  gap: 5rem;
  display: flex;
}

.scene__tab {
  color: #333;
  cursor: pointer;
  width: 10.625rem;
  height: 4.125rem;
  transition: color var(--site-duration-fast) ease, background-color var(--site-duration-fast) ease, box-shadow var(--site-duration) var(--site-ease);
  background-color: #f1f1f1;
  border: none;
  border-radius: 2.0625rem;
  font-size: 1rem;
}

@media (hover:hover) {
  .scene__tab:not(.is-active):hover {
    color: var(--site-primary);
    background-color: var(--site-primary-soft);
  }
}

.scene__tab:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ui-color-primary-light-5);
  outline: none;
}

.scene__tab.is-active {
  color: #fff;
  background-color: var(--site-primary);
  box-shadow: var(--site-shadow-primary);
}

.scene__heading {
  margin-top: 7.6875rem;
}

.scene__subheading {
  margin-top: 1rem;
}

.scene__body {
  margin-top: 3.9375rem;
  margin-left: 2px;
  display: flex;
}

.scene__image {
  object-fit: cover;
  border-radius: 1.5rem;
  flex-shrink: 0;
  width: 45.5625rem;
  height: 26.8125rem;
}

.scene__text {
  width: 25.625rem;
  margin-left: 3.6875rem;
  padding-top: 8.5rem;
}

.scene__text:before {
  content: "";
  background-color: #a8c2f7;
  width: 1.5625rem;
  height: .25rem;
  display: block;
}

.scene__title {
  margin-top: 1.25rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.9375rem;
}

.scene__desc {
  color: var(--site-text-regular);
  margin-top: 1.75rem;
  font-size: 1rem;
  line-height: 1.75rem;
}

.pain__stage > .pain__tag:nth-child(1) {
  left: 61.5625rem;
  top: 5rem;
}

.pain__stage > .pain__tag:nth-child(2) {
  left: 20.8125rem;
  top: 8.4375rem;
}

.pain__stage > .pain__tag:nth-child(3) {
  left: 39.125rem;
  top: 7.3125rem;
}

.pain__stage > .pain__tag:nth-child(4) {
  left: 33.375rem;
  top: 11.125rem;
}

.pain__stage > .pain__tag:nth-child(5) {
  left: 53.4375rem;
  top: 10.1875rem;
}

.pain__stage > .pain__tag:nth-child(6) {
  left: 24.4375rem;
  top: 15.75rem;
}

.pain__stage > .pain__tag:nth-child(7) {
  left: 67.25rem;
  top: 14.4375rem;
}

.pain__stage > .pain__tag:nth-child(8) {
  left: 29.6875rem;
  top: 20rem;
}

.pain__stage > .pain__tag:nth-child(9) {
  left: 72.9375rem;
  top: 19rem;
}

.pain__stage > .pain__tag:nth-child(10) {
  left: 17.125rem;
  top: 23.0625rem;
}

.pain__stage > .pain__tag:nth-child(11) {
  left: 63.75rem;
  top: 21.4375rem;
}

.pain__stage > .pain__tag:nth-child(12) {
  left: 30.3125rem;
  top: 26.125rem;
}

.pain__stage > .pain__tag:nth-child(13) {
  left: 60.1875rem;
  top: 27.25rem;
}

.pain__stage > .pain__tag:nth-child(14) {
  left: 43.75rem;
  top: 30.0625rem;
}

.needs__grid > .need-card:nth-child(1) > .need-card__icon:nth-child(1) {
  --left: 14.75rem;
  --top: 7.5625rem;
}

.needs__grid > .need-card:nth-child(2) {
  --reveal-delay: 100ms;
}

.needs__grid > .need-card:nth-child(2) > .need-card__icon:nth-child(1) {
  --left: 14.5625rem;
  --top: 7.9375rem;
}

.needs__grid > .need-card:nth-child(3) {
  --reveal-delay: 200ms;
}

.needs__grid > .need-card:nth-child(3) > .need-card__icon:nth-child(1) {
  --left: 15.8125rem;
  --top: 7.4375rem;
}

/* Preserve button alignment for older server templates that still use links. */
a.scene__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}