.banner-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.banner-container-mobile {
  display: none;
}

.banner {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 30px;
  margin-bottom: 40px;
  margin-top: 10px;
}

.feat-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wrapper {
  margin-bottom: 40px;
}

.button {
  position: absolute;
  left: 3.4%;
  bottom: 18%;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: #db002c;
  border: 1px solid #ffffff6e;
  box-shadow: 0px 0px 20px 0px #ff0004;
  cursor: pointer;
  z-index: 2;
}

.button:hover {
  background: #f60031;
  color: #fff;
  border: 1px solid #ffffff99;
  box-shadow: 0px 0px 20px 0px #ff7476;
}

.button:active {
  background: #a80022;
  color: #fff;
  border: 1px solid #ffffff26;
  box-shadow: 0px 0px 20px 0px #ff000466;
}

.button:focus {
  color: #fff;
}

.button-mobile {
  display: none;
}

.mail-feature {
  color: #d9002b;
  text-decoration: underline;
  font-weight: 700;
  white-space: nowrap;
}

.mail-feature:hover {
  color: #000;
}
.feature-wrapper {
  display: flex;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  gap: 20px;
}

.feature {
  font-weight: 500;
  font-size: 24px;
  color: #000;
  margin-bottom: 24px;
}

.feature-item {
  width: 100%;
  background: #f6f6f9;
  border-radius: 20px;
  padding: 24px 20px 43px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature-title {
  font-weight: 700;
  font-size: 20px;
  color: #000000;
}

.feature-description {
  font-weight: 400;
  font-size: 16px;
  color: #444444;
}

.feature-icon {
  margin-left: 0;
}

.cooperation-wrapper {
  background: #f6f6f9;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);

  margin-bottom: 40px;
}

.cooperation-card-wrapper {
  display: flex;
  gap: 30px;
}

.cooperation-card {
  background: #ffffff;
  width: 100%;
  border-radius: 12px;
  padding: 26px 30px 54px 26px;
}

.cooperation-card-header {
  display: flex;
  margin-bottom: 46px;
}

.cooperation-card-icon {
  margin-right: 20px;
  margin-left: 0;
}

.cooperation-card-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cooperation-option {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cooperation-option-icon {
  margin-right: 0;
}

.cooperation-title {
  font-weight: 700;
  font-size: 16px;
  color: #444444;
}

.cooperation-description {
  font-weight: 400;
  font-size: 14px;
  color: #888888;
}

.discuss-wrapper {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
}

/* #discuss-block {
  scroll-margin-top: 100px;
} */

.left-section {
  width: 550px;
}

.right-section {
  background: #f6f6f9;
  padding: 30px 26px;
  width: 100%;
  border-radius: 16px;
}

.discuss-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.discuss-label {
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
  color: #000;
}

.discuss-input {
  width: 100%;
  background: #fff;
  border: none;
  padding: 14px 16px;
  border-radius: 6px;
}

.discuss-input:placeholder {
  color: #9ca3af;
}

.discuss-input:focus {
  border: 1px solid #d9002b80;
  outline: none;
}

.discuss-input:focus-visible {
  border: 1px solid #d9002b80;
  outline: none;
}

.discuss-button {
  border-radius: 8px;
  border: none;
  background: #db002c;
  color: #fff;
  padding: 16px;
}

.discuss-button:hover {
  background: #f60031;
}

.discuss-button:active {
  background: #a80022;
}

.discuss-description {
  color: #000;
  font-weight: 400;
  font-size: 16px;
}

.discuss-agreement {
  font-size: 12px;
  color: #444444;
  margin-bottom: 4px;
  margin-top: 20px !important;
  text-align: center;
  line-height: 16px;
}

.filter.licence_block {
  padding: 0;
  margin: 0;
}

.bottom-notice {
  margin-bottom: 0;
  font-size: 16px;
  color: #444444;
  font-style: italic;
}

@media (max-width: 878px) {
  .feature-title {
    width: 99%;
  }
  .cooperation-option-icon {
    margin-left: 0;
  }
  .cooperation-card-wrapper {
    flex-direction: column;
    gap: 12px;
  }

  .cooperation-card {
    width: 100%;
    padding: 20px;
  }

  .cooperation-card-header {
    position: relative;
    padding-bottom: 0;
    margin-bottom: 0;
    transition: padding-bottom 0.3s ease;
  }

  .cooperation-card.active .cooperation-card-header {
    padding-bottom: 0;
  }

  .cooperation-card-header::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url("/company/pr/image/arrow.svg") center/contain no-repeat;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }

  .cooperation-card.active .cooperation-card-header::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .cooperation-card-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;

    transition:
      max-height 0.3s ease,
      opacity 0.3s ease,
      padding-top 0.3s ease;
  }

  .cooperation-card.active .cooperation-card-body {
    opacity: 1;
    padding-top: 20px;
  }
}

@media (max-width: 768px) {
  .feature-wrapper {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
  }
}

@media (max-width: 585px) {
  .banner-container {
    display: none;
  }

  .banner-container-mobile {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .button {
    display: none;
  }

  .banner {
    margin-bottom: 24px;
  }
  .button-mobile {
    display: block;
    position: absolute;
    left: 6.4%;
    bottom: 59%;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: #db002c;
    border: 1px solid #ffffff6e;
    box-shadow: 0px 0px 20px 0px #ff0004;
    cursor: pointer;
    z-index: 2;
  }

  .button-mobile:hover {
    background: #f60031;
    color: #fff;
    border: 1px solid #ffffff99;
    box-shadow: 0px 0px 20px 0px #ff7476;
  }

  .button-mobile:active {
    background: #a80022;
    color: #fff;
    border: 1px solid #ffffff26;
    box-shadow: 0px 0px 20px 0px #ff000466;
  }

  /* .feature-item {
    width: 166px;
  } */

  .feature-description {
    font-size: 14px;
  }

  .discuss-wrapper {
    flex-direction: column;
    margin-bottom: 30px;
  }

  .left-section {
    width: 100%;
  }

  .bottom-notice {
    font-size: 12px;
    margin-bottom: 20px;
  }
}