:root {
  --Gray100: #f5f5f5;
  --attention-red: #d22323;
  --primary-color: #272343;
  font-family: 'Noto Sans CJK JP';
}
.br-is-sp {
  display: none;
}
.contact-service,
.form-container {
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 480px) {
  .br-is-pc {
    display: none;
  }
}
.main-visual {
  background-color: var(--primary-color);
  padding: 50px 0;
  text-align: center;
  grid-column: 1/-1;
}
.main-visual h2 {
  color: #fff;
  font-size: 36px;
  letter-spacing: 1.8px;
  font-weight: 500;
}
@media screen and (max-width: 480px) {
  .main-visual h2 {
    font-size: clamp(24px, calc(24px + (30 - 24) * ((100vw - 375px) / (480 - 375))), 30px);
    line-height: 1.5;
    letter-spacing: 1.2px;
  }
  .br-is-sp {
    display: inline-block;
  }
}
.recruit-cta {
  text-align: center;
  margin: 54px 0 75px;
}
.recruit-cta a {
  text-decoration: underline;
}
@media screen and (max-width: 480px) {
  .recruit-cta {
    margin: 27px 0 52px;
  }
  .recruit-cta span {
    font-size: 16px;
  }
}
.form {
  display: flex;
  flex-direction: column;
  gap: 48px;
  color: var(--primary-color);
}
.form-item {
  display: grid;
  grid-template-columns: 260px 624px;
  gap: 48px;
  position: relative;
}
.form-item + .form-item::before {
  content: '';
  top: -24px;
  width: 100%;
  position: absolute;
  background-color: var(--Gray100);
  height: 1px;
}
@media screen and (max-width: 480px) {
  .form-item {
    display: block;
  }
}
.select-container {
  position: relative;
  display: block;
}
.select-container select {
  width: 100%;
  appearance: none;
  padding: 10px;
  border: 1px solid #373737;
  border-radius: 4px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 7.5999L0.192697 1.56694C0.131605 1.50346 0.0831432 1.42809 0.0500803 1.34515C0.0170164 1.26221 -3.38068e-08 1.17331 -2.98826e-08 1.08354C-2.59583e-08 0.993759 0.0170164 0.904862 0.0500803 0.82192C0.0831432 0.738978 0.131605 0.663615 0.192698 0.600133C0.253791 0.536652 0.326319 0.486296 0.40614 0.45194C0.485962 0.417585 0.571514 0.399902 0.657913 0.399902C0.744311 0.399902 0.829864 0.417585 0.909686 0.45194C0.989508 0.486296 1.06203 0.536652 1.12313 0.600133L6 5.66903L10.8769 0.600134C11.0003 0.471928 11.1676 0.399902 11.3421 0.399902C11.5166 0.399902 11.6839 0.471928 11.8073 0.600134C11.9307 0.72834 12 0.902225 12 1.08354C12 1.26485 11.9307 1.43873 11.8073 1.56694L6 7.5999Z" fill="%23373737"/></svg>') no-repeat right 10px center;
  background-size: 12px 8px;
}
.privacy-policy {
  display: block;
}
.form-input {
  padding: 10px 14px;
  background-color: var(--Gray100);
  border-radius: 5px;
  border: transparent;
  width: 100%;
}
.form-input.formrun-has-success {
  background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;;
}
.form-input-error {
  border: 1px solid var(---black, #373737);
  background-color: #fff0f0;
}
.select-container .form-input-error {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 7.5999L0.192697 1.56694C0.131605 1.50346 0.0831432 1.42809 0.0500803 1.34515C0.0170164 1.26221 -3.38068e-08 1.17331 -2.98826e-08 1.08354C-2.59583e-08 0.993759 0.0170164 0.904862 0.0500803 0.82192C0.0831432 0.738978 0.131605 0.663615 0.192698 0.600133C0.253791 0.536652 0.326319 0.486296 0.40614 0.45194C0.485962 0.417585 0.571514 0.399902 0.657913 0.399902C0.744311 0.399902 0.829864 0.417585 0.909686 0.45194C0.989508 0.486296 1.06203 0.536652 1.12313 0.600133L6 5.66903L10.8769 0.600134C11.0003 0.471928 11.1676 0.399902 11.3421 0.399902C11.5166 0.399902 11.6839 0.471928 11.8073 0.600134C11.9307 0.72834 12 0.902225 12 1.08354C12 1.26485 11.9307 1.43873 11.8073 1.56694L6 7.5999Z" fill="%23373737"/></svg>') no-repeat right 10px center #fff0f0;
}
.form-error-message {
  color: var(--attention-red);
  font-size: 13px;
  font-weight: 500;
  margin-left: 10px;
  margin-top: 3px;
}
.privacy-policy-block-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
}
.privacy-policy .form-input {
  height: 200px;
  overflow-y: scroll;
  padding: 23px 30px;
}
@media screen and (max-width: 480px) {
  .privacy-policy .form-input {
    overflow-x: hidden;
    padding: 23px 21px;
  }
}
.privacy-policy .form-input::-webkit-scrollbar {
  width: 20px;
}
.privacy-policy .form-input::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  min-height: 100px;
  border-radius: 10px;
  border: 5px solid transparent;
  background-clip: padding-box;
}
.privacy-policy .form-input::-webkit-scrollbar-track {
  margin: 10px 0;
}
.form-label {
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: start;
  gap: 5px;
}
.label-subtext {
  display: block;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 480px) {
  .form-label {
    margin-bottom: 18px;
  }
}
.required {
  margin-top: 2px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--attention-red);
  border: 1px solid var(--attention-red);
  border-radius: 4px;
  flex-shrink: 0;
}
.tel .form-input,
.select-container .form-input {
  width: 70%;
}
@media screen and (max-width: 480px) {
  .tel .form-input,
  .select-container .form-input {
    width: 100%;
  }
}
.inquiry-detial .form-input {
  resize: none;
}
.privacy-policy .form-label {
  margin-bottom: 28px;
}
.checkbox + span {
  position: relative;
  font-size: 16px;
  font-weight: 700;
}
input[type='checkbox'] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  width: 23px;
  height: 23px;
  z-index: 1;
  margin-right: 7px;
  transform: translateY(15%);
}
.checkbox {
  display: inline-block;
  width: 23px;
  height: 23px;
  border: 1px solid #d9d9d9;
  background-color: var(--Gray100);
  cursor: pointer;
  z-index: 0;
  margin-right: 5px;
  transform: translateY(15%);
}
input[type='checkbox']:checked + .checkbox {
  background-color: #808cf7;
}
input[type='checkbox']:checked + .checkbox::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 15px;
  height: 13px;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" viewBox="0 0 15 13" fill="none"><path d="M1 6.31034L4.61111 12L14 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat;
}
.form-submit {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 60px;
}
.form-submit button {
  display: inline-block;
  width: 320px;
  height: 66px;
  position: relative;
  border-radius: 38px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.3s;
}
.form-submit button::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 23px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: all 0.2s;
}
.form-submit button:hover {
  opacity: 0.7;
}

.btn-off {
  background: #d4d4d4;
  border: solid 1px #fff;
  border-radius: 38px;
}
.btn-off button::after {
  background: url(../../images/renewal/common/btn-arrow-off.png) no-repeat 0 0 / cover #fff;
}

.btn-on {
  background: #808cf7;
  border-radius: 38px;
}
.btn-on button {
  cursor: pointer;
}
.btn-on button::after {
  background: url(../../images/renewal/common/btn-arrow.png) no-repeat 0 0 / cover var(--primary-color);
}
.btn-on button:hover {
  background: var(--primary-color);
  border: solid 1px var(--primary-color);
}
.btn-on button:hover::after {
  background: url(../../images/renewal/common/btn-arrow-on.png) no-repeat 0 0 / cover #fff;
}

/*=========
送信完了===========*/
.check-circle {
  margin: 0 auto;
  width: 109px;
  height: 109px;
  background-color: #f5f5f5;
  border-radius: 50%;
  position: relative;
  margin-top: 117px;
}
.check-circle::after {
  content: '';
  width: 45px;
  height: 35px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="35" viewBox="0 0 45 35" fill="none"><path d="M5 18.681L15.5777 29.2587L39.8443 4.99219" stroke="%23808CF7" stroke-width="9.77402" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.thanks-ttl {
  color: #808cf7;
  text-align: center;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 51px */
  letter-spacing: 1.7px;
  margin: 24px auto 40px;
}
.thanks-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  text-align: center;
}
@media screen and (max-width: 480px) {
  .thanks-desc {
    text-align: left;
  }
}
.c-btn-box {
  display: flex;
  margin: 0 auto;
  margin-top: 60px;
}
.c-btn-top {
  margin: 0 auto;
  width: 320px;
  height: 66px;
  position: relative;
  background: #808cf7;
  border: solid 1px #fff;
  border-radius: 38px;
  transition: all 0.3s;
}
.c-btn-top:hover {
  background: #272343;
  border: solid 1px #272343;
  transition: all 0.2s;
}
.c-btn-top::after {
  top: 50%;
  right: 23px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  content: '';
  position: absolute;
  background: url(../../images/renewal/common/btn-arrow.png) no-repeat 0 0 / cover #272343;
  border-radius: 50%;
  transition: all 0.2s;
}
.c-btn-top:hover::after {
  background: url(../../images/renewal/common/btn-arrow-on.png) no-repeat 0 0 / cover #fff;
}
.c-btn-top a {
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*=========
サービスお問合せ===========*/
.contact-service {
  margin: 32px auto 95px;
}

.service-ttl {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  margin: 28px 0;
}

.service-desc h2 {
  font-size: 20px;
}

.service-desc h3 {
  margin-top: 1em;
}

.service-desc{
  max-width: 880px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.service-desc p{
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}
.service-desc p + p{
  margin-top: 0.5em;
}
.service-desc .is-style-section_ttl{
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  margin-bottom: 10px;
}
.service-desc ul{
  list-style-type: none;
  margin-top: 1em;
}
.service-desc li{
  line-height: 1.8;
  display: flex;
  gap: 12px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  position: relative;
}
.service-desc .is-style-good_list li::before{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background-color: #000;
  top: 12px;
  position: relative;
}

.service-desc .is-style-check_list li::before{
  content: "✔️";
  font-size: 16px;
  position: relative;
}

.has-2-columns{
  display: flex;
  justify-content: center;
  gap: 2%;
  margin-top: 28px;
}


@media screen and (max-width: 480px) {
  .contact-service {
    margin: 15px auto 42px;
  }
}

@media screen and (max-width: 480px) {
  .service-ttl {
    font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / (480 - 375))), 20px);
    margin: 24px auto;
    line-height: 1.5;
  }
}

.li-disc {
  display: inline-block;
  background-color: #272343;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 480px) {
  .service-desc-list {
    margin: 0;
  }
  .service-desc-list li {
    font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 375px) / (480 - 375))), 18px);
    gap: clamp(8px, calc(8px + (10 - 8) * ((100vw - 375px) / (480 - 375))), 10px);
  }
}
.other-services .form-input-container {
  display: flex;
  flex-direction: column;
}
.label-with-subtext {
  flex-direction: column;
}
@media screen and (max-width: 480px) {
  .label-with-subtext {
    flex-direction: row;
  }
  .label-with-subtext label {
    flex-basis: 85%;
  }
}

.form-checkbox{
  display: flex;
  flex-wrap: wrap;
  row-gap: 1em;
  column-gap: 1em;
}

.checkbox-label {
  display: flex;
}

.visit-path-manual::before,.purpose-manual::before,.consider-manual::before,.service-manual::before,.crm-manual::before,.marketing-manual::before,.uiux-manual::before,.nps-manual::before,.ga4-manual::before,.research-manual::before {
  background-color:#fff !important;
}