.slogan {
  position: relative;
  height: 30.63vw;
  padding-top: 8.07vw;
  padding-left: 4.43vw;
  background: var(--bg-image) no-repeat 0 0/cover fixed;
  clip-path: inset(0);
}

.slogan::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: transparent;
  transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.slogan.ky-hover.is-ready:hover::before {
  background-color: rgba(0, 0, 0, 0.08);
}

.slogan .container {
  position: relative;
  z-index: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.slogan.ky-hover.is-ready:hover .container {
  transform: translate3d(0.42vw, 0, 0);
}

.slogan .quote {
  font-size: 8.33vw;
  line-height: .8;
  font-family: Arial;
  font-weight: 700;
  color: #2D77D9;
  transition: color 0.35s ease;
}

.slogan.ky-hover.is-ready:hover .quote {
  color: #4a96f0;
}

.slogan .title {
  font-size: 2.29vw;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  transition: letter-spacing 0.4s ease;
}

.slogan.ky-hover.is-ready:hover .title {
  letter-spacing: 0.06em;
}

.slogan .desc {
  color: #fff;
  font-size: .83vw;
  line-height: 2;
  margin-top: 2.24vw;
  width: 63%;
  transition: text-shadow 0.35s ease;
}

.slogan.ky-hover.is-ready:hover .desc {
  text-shadow: 0 0 0.52vw rgba(255, 255, 255, 0.35);
}

.process {
  position: relative;
  padding-top: 5.73vw;
  padding-bottom: 6.72vw;
  background-color: #fff;
}

.process .title {
  font-size: 2.29vw;
  font-weight: 700;
}

.process .list {
  display: flex;
  margin-top: 4.43vw;
  gap: 1.46vw;
}

.process .list .item {
  background-color: #fff;
  flex: 1;
  padding: 2.03vw 2.24vw 0;
  box-shadow: 0 0 1.56vw rgba(0, 0, 0, 0.3);
  height: 17.71vw;
  border-radius: .42vw;
  color: #333;
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.process .list .item:hover {
  background-color: #2d77d9;
  color: #fff;
  box-shadow: 0 0.42vw 1.56vw rgba(45, 119, 217, 0.35);
}

.process .list .item .header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.41vw;
  border-bottom: 1px solid #333;
  transition: border-color 0.35s ease;
}

.process .list .item:hover .header {
  border-bottom-color: #fff;
}

.process .list .item .header .num {
  font-size: 3.13vw;
  font-weight: 700;
  font-family: Arial;
  line-height: 1;
  color: #2D77D9;
  transition: color 0.35s ease;
}

.process .list .item:hover .header .num {
  color: #fff;
}

.process .list .item:first-child .header .icon {
  width: 2.71vw;
  height: 2.86vw;
  background: url(../images/promise-process-icon1.svg) no-repeat center/contain;
  transition: filter 0.35s ease;
}

.process .list .item:nth-child(2) .header .icon {
  width: 2.6vw;
  height: 2.86vw;
  background: url(../images/promise-process-icon2.svg) no-repeat center/contain;
  transition: filter 0.35s ease;
}

.process .list .item:nth-child(3) .header .icon {
  width: 2.86vw;
  height: 2.86vw;
  background: url(../images/promise-process-icon3.svg) no-repeat center/contain;
  transition: filter 0.35s ease;
}

.process .list .item:hover .header .icon {
  filter: brightness(0) invert(1);
}

.process .list .item .process-name {
  line-height: 1;
  font-size: 1.46vw;
  font-weight: 700;
  margin-top: 1.41vw;
}

.process .list .item ul {
  margin-top: .99vw;
  line-height: 2;
  font-size: .83vw;
}

.process .list .item ul li {
  position: relative;
  padding-left: 1.15vw;
}

.process .list .item ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5lh;
  transform: translateY(-50%);
  width: .42vw;
  height: .42vw;
  border-radius: 50%;
  background-color: #333;
  transition: background-color 0.35s ease;
}

.process .list .item:hover ul li::before {
  background-color: #fff;
}

.service {
  position: relative;
  z-index: 1;
  height: 46.88vw;
  background: var(--bg-image) no-repeat center/cover fixed;
  padding-top: 6.25vw;
}

.service .title {
  font-size: 2.29vw;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.service .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 1.46vw;
  margin-top: 5.21vw;
}

.service .list .item {
  height: 23.33vw;
  background-color: #fff;
  padding: 2.45vw 2.19vw 0;
  color: #333;
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.service .list .item:hover {
  background-color: #2d77d9;
  color: #fff;
  box-shadow: 0 0.42vw 1.56vw rgba(45, 119, 217, 0.35);
}

.service .list .item .header {
  padding-bottom: 1.46vw;
  border-bottom: 1px solid #333333;
  transition: border-color 0.35s ease;
}

.service .list .item:hover .header {
  border-bottom-color: #fff;
}

.service .list .item:first-child .header .icon {
  width: 3.28vw;
  height: 3.23vw;
  background: var(--bg-image) no-repeat center/contain;
  transition: filter 0.35s ease;
}

.service .list .item:nth-child(2) .header .icon {
  width: 3.49vw;
  height: 3.13vw;
  background: var(--bg-image) no-repeat center/contain;
  transition: filter 0.35s ease;
}

.service .list .item:nth-child(3) .header .icon {
  width: 2.86vw;
  height: 3.23vw;
  background: var(--bg-image) no-repeat center/contain;
  transition: filter 0.35s ease;
}

.service .list .item:nth-child(4) .header .icon {
  width: 3.02vw;
  height: 3.02vw;
  background: var(--bg-image) no-repeat center/contain;
  transition: filter 0.35s ease;
}

.service .list .item:hover .header .icon {
  filter: brightness(0) invert(1);
}

.service .list .item .service-name {
  line-height: 1;
  font-size: 1.46vw;
  font-weight: 700;
  margin-top: 1.67vw;
}

.service .list .item ul {
  font-size: .83vw;
  line-height: 2;
  margin-top: 1.04vw;
}

.service .list .item ul li {
  padding-left: 1.09vw;
  position: relative;
}

.service .list .item ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5lh;
  transform: translateY(-50%);
  width: .42vw;
  height: .42vw;
  border-radius: 50%;
  background-color: #333;
  transition: background-color 0.35s ease;
}

.service .list .item:hover ul li::before {
  background-color: #fff;
}


.promise {
  position: relative;
  z-index: 1;
  padding-top: 4.95vw;
  padding-bottom: 7.71vw;
  background-color: #fff;
}

.promise .title {
  font-size: 2.29vw;
  font-weight: 700;
  line-height: 1;
}

.promise .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 1.46vw;
  margin-top: 5.21vw;
}

.promise .list .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promise .list .item .header {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 1.2vw;
  border-bottom: 1px solid #e5e5e5;
  transition: border-color 0.35s ease;
}

.promise .list .item:hover .header {
  border-bottom-color: #2d77d9;
}

.promise .list .item:first-child .header .icon {
  width: 3.07vw;
  height: 3.54vw;
  background: var(--bg-image) no-repeat center/contain;
}

.promise .list .item:nth-child(2) .header .icon {
  width: 3.49vw;
  height: 3.54vw;
  background: var(--bg-image) no-repeat center/contain;
}

.promise .list .item:nth-child(3) .header .icon {
  width: 3.23vw;
  height: 3.54vw;
  background: var(--bg-image) no-repeat center/contain;
}

.promise .list .item:nth-child(4) .header .icon {
  width: 3.54vw;
  height: 3.33vw;
  background: var(--bg-image) no-repeat center/contain;
}

.promise .list .item .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.promise .list .item .info .service-name {
  margin-top: 1.04vw;
  font-size: 1.46vw;
  font-weight: 700;
  letter-spacing: 0;
  transition: color 0.35s ease, letter-spacing 0.4s ease;
}

.promise .list .item:hover .info .service-name {
  color: #2d77d9;
  letter-spacing: 0.06em;
}

.promise .list .item .info .line {
  margin-top: 1.25vw;
  background-color: #2d77d9;
  width: 2.71vw;
  height: .21vw;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.promise .list .item:hover .info .line {
  width: 4.17vw;
}

.promise .list .item .info .desc {
  margin-top: 1.09vw;
  font-size: .83vw;
  line-height: 1;
  color: #666;
  letter-spacing: 0;
  transition: color 0.35s ease, letter-spacing 0.4s ease;
}

.promise .list .item:hover .info .desc {
  color: #333;
  letter-spacing: 0.04em;
}

.attitude {
  position: relative;
  z-index: 1;
  height: 17.19vw;
  background: #12243b;
}

.attitude .wrapper {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.attitude .left {
  line-height: 1;
  color: #fff;
  flex: 1;
}

.attitude .left .title {
  font-size: 1.77vw;
  font-weight: 700;
}

.attitude .left .desc {
  margin-top: 1.25vw;
  font-size: 1.25vw;
}

.attitude .icon {
  width: 6.93vw;
  height: 6.51vw;
  background: var(--bg-image) no-repeat center/contain;
}

footer {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 1020px) {
  .slogan {
    height: auto;
    min-height: 80vw;
    padding: var(--m-section-py) var(--m-space-md);
    background-position: 30% 30%;
  }

  .slogan .quote {
    font-size: 20vw;
  }

  .slogan .title {
    font-size: var(--m-font-h1);
    margin-top: var(--m-space-xs);
    line-height: 1.5;
  }

  .slogan .desc {
    width: 100%;
    margin-top: var(--m-space-sm);
    font-size: var(--m-font-body);
    line-height: 1.85;
  }

  .slogan.ky-hover.is-ready:hover::before {
    background-color: transparent;
  }

  .slogan.ky-hover.is-ready:hover .container {
    transform: none;
  }

  .process {
    position: relative;
    padding-top: var(--m-section-py);
    padding-bottom: var(--m-section-py);
  }

  .process .title {
    font-size: var(--m-font-h1);
  }

  .process .list {
    flex-direction: column;
    margin-top: var(--m-gap-block);
    gap: var(--m-space-md);
  }

  .process .list .item {
    height: auto;
    padding: var(--m-space-md) var(--m-space-sm);
    border-radius: 1.067vw;
    box-shadow: 0 0 4vw rgba(0, 0, 0, 0.12);
  }

  .process .list .item .header {
    padding-bottom: var(--m-space-sm);
  }

  .process .list .item .header .num {
    font-size: var(--m-font-display);
  }

  .process .list .item:first-child .header .icon {
    width: 12.133vw;
    height: 12.8vw;
  }

  .process .list .item:nth-child(2) .header .icon {
    width: 11.64vw;
    height: 12.8vw;
  }

  .process .list .item:nth-child(3) .header .icon {
    width: 12.8vw;
    height: 12.8vw;
  }

  .process .list .item .process-name {
    margin-top: var(--m-space-sm);
    font-size: var(--m-font-h2);
  }

  .process .list .item ul {
    margin-top: var(--m-space-xs);
    font-size: var(--m-font-body);
    line-height: 1.85;
  }

  .process .list .item ul li {
    padding-left: var(--m-space-sm);
  }

  .process .list .item ul li::before {
    width: 1.067vw;
    height: 1.067vw;
  }

  .service {
    height: auto;
    padding: var(--m-section-py) 0;
  }

  .service .title {
    font-size: var(--m-font-h1);
  }

  .service .list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--m-space-md) var(--m-space-sm);
    margin-top: var(--m-gap-block);
  }

  .service .list .item {
    height: auto;
    padding: var(--m-space-md) var(--m-space-sm);
    border-radius: 1.067vw;
  }

  .service .list .item .header {
    padding-bottom: var(--m-space-sm);
  }

  .service .list .item:first-child .header .icon {
    width: 13vw;
    height: 12.8vw;
  }

  .service .list .item:nth-child(2) .header .icon {
    width: 14.267vw;
    height: 12.8vw;
  }

  .service .list .item:nth-child(3) .header .icon {
    width: 11.337vw;
    height: 12.8vw;
  }

  .service .list .item:nth-child(4) .header .icon {
    width: 12.8vw;
    height: 12.8vw;
  }

  .service .list .item .service-name {
    margin-top: var(--m-space-sm);
    font-size: var(--m-font-h2);
  }

  .service .list .item ul {
    margin-top: var(--m-space-xs);
    font-size: var(--m-font-body);
    line-height: 1.85;
  }

  .service .list .item ul li {
    padding-left: var(--m-space-sm);
  }

  .service .list .item ul li::before {
    width: 1.067vw;
    height: 1.067vw;
  }

  .promise {
    padding-top: var(--m-section-py);
    padding-bottom: var(--m-section-py);
  }

  .promise .title {
    font-size: var(--m-font-h1);
  }

  .promise .list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--m-gap-block) var(--m-space-sm);
    margin-top: var(--m-gap-block);
  }

  .promise .list .item .header {
    padding-bottom: var(--m-space-sm);
  }

  .promise .list .item:first-child .header .icon {
    width: 12.947vw;
    height: 14.933vw;
  }

  .promise .list .item:nth-child(2) .header .icon {
    width: 14.719vw;
    height: 14.933vw;
  }

  .promise .list .item:nth-child(3) .header .icon {
    width: 13.622vw;
    height: 14.933vw;
  }

  .promise .list .item:nth-child(4) .header .icon {
    width: 15.867vw;
    height: 14.933vw;
  }

  .promise .list .item .info .service-name {
    margin-top: var(--m-space-sm);
    font-size: var(--m-font-h2);
    text-align: center;
  }

  .promise .list .item .info .line {
    margin-top: var(--m-space-xs);
    width: 10.667vw;
    height: 2px;
  }

  .promise .list .item .info .desc {
    margin-top: var(--m-space-xs);
    font-size: var(--m-font-body);
    line-height: 1.55;
    text-align: center;
  }

  .attitude {
    height: auto;
    padding: var(--m-section-py) 0;
  }

  .attitude .wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m-gap-block);
    padding: 0 var(--m-space-md);
  }

  .attitude .left .title {
    font-size: var(--m-font-h2);
    line-height: 1.5;
  }

  .attitude .left .desc {
    margin-top: var(--m-space-sm);
    font-size: var(--m-font-body);
    line-height: 1.75;
  }

  .attitude .icon {
    width: 18.667vw;
    height: 17.547vw;
    align-self: center;
  }

  .process .list .item:hover,
  .service .list .item:hover {
    background-color: #fff;
    color: #333;
    box-shadow: 0 0 4vw rgba(0, 0, 0, 0.12);
  }

  .process .list .item:hover .header,
  .service .list .item:hover .header {
    border-bottom-color: #333;
  }

  .process .list .item:hover .header .num {
    color: #2d77d9;
  }

  .process .list .item:hover .header .icon,
  .service .list .item:hover .header .icon {
    filter: none;
  }

  .process .list .item:hover ul li::before,
  .service .list .item:hover ul li::before {
    background-color: #333;
  }

  .promise .list .item:hover .header {
    border-bottom-color: #e5e5e5;
  }

  .promise .list .item:hover .info .service-name {
    color: inherit;
    letter-spacing: 0;
  }

  .promise .list .item:hover .info .line {
    width: 10.667vw;
  }

  .promise .list .item:hover .info .desc {
    color: #666;
    letter-spacing: 0;
  }
}

@media screen and (max-width: 767px) {
  .service .list,
  .promise .list {
    grid-template-columns: 1fr;
    gap: var(--m-space-md);
  }
}