@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Baloo+2&family=Comfortaa&family=M+PLUS+Rounded+1c:wght@300&family=Noto+Sans+JP:wght@400;700&display=swap");
html, body, header, footer, main, section, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
*::selection {
  color: #fff;
  background-color: hsl(225 59 60);
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  max-width: 470px;
  margin: 0 auto;
}
img, a{
  display: block;
  width: 100%;
  max-width: 100%;
}
a{
  transition: 0.5s ease;
}
/* マウスでhoverできる端末だけで有効 */
@media (hover: hover) and (pointer: fine) {
  a:where(:not(article a)):hover {
    transform: scale(1.03);
  }
}
a:hover img{
  opacity: 1;
}
.sponly{
  display: none;
  @media (width < 470px) {
    display: block;
  }
}
/* header */
.header{
  display: flex;
  padding: 10px;
  justify-content: space-between;
  align-items: center;
  box-shadow: 6px 11px 10px -7px rgba(0, 0, 0, 0.3);
  position: fixed;
  z-index: 100;
  background: #fff;
  max-width: 470px;
  margin: auto;
}
.header img[src*="logo"]{
  width: 42.5%;
  height: fit-content;
  aspect-ratio: 191 / 22;
  object-fit: contain;
}
.header a{
  width: 50%;
  height: fit-content;
}
/* bg */
.bg{
  background-image: url(./img/bg.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* fv */
.fv{
  position: relative;
  padding-top: 70px;
}
.fv a,
.fv #startBtn{
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 85%;
  transform: translateX(-50%);
  display: block;
}
.fv #startBtn{
  left: 8%;
}
.fv a:hover,
.fv #startBtn:hover{
  opacity: 0.7;
}
/* swiper */
.swiper {
    width: 100%;
    overflow: hidden;
    height: 100px;
    touch-action: none;
    pointer-events: none;
    background-color: #fff;
    /* @media(769px > width >= 470px){
        max-height: 85px;
    }
    @media(width <= 768px){
        max-height: 100px;
    } */
}
.swiper-slide {
    height: 100%;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    @media (width <= 470px) {
      width: 125px;
    }
}
.swiper-slide img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.swiper-wrapper {
    transition-timing-function: linear !important;
    transform: translateZ(0);
    will-change: transform;
}
.company_caution{
  background-color: #fff;
  text-align: center;
  color: #1C2E6B;
  font-size: 0.6rem;
  padding-bottom: 10px;
  font-weight: 600;
}

/* flow */
img[src*="flow-title"]{
  width: 80%;
  margin: 5% auto 0;
}
/* modal */
button{
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
button:focus {
  outline: none;
}
#startBtn{
    animation: bigger 1.8s infinite;
    padding: 60px 0 0;
}
/* modal本体 */
#modal{
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1000;
  .modal_width{
      position: relative;
      width: 95%;
      max-width: 470px;
      background-color: #FFF;
      background-image: url(./img/bg.webp);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      /* margin: auto; */
      border-radius: 20px;
      @media(width <= 470px){
        width: 85%;
        max-height: 90dvh;
        overflow: hidden;
      }
  }
  .stepForm{
    .step{
      display: none;
      width: 100%;

      .step_box{
          width: 90%;
          margin: auto;
          padding: 30px 1.5% 3%;
          position: relative;
          max-height: 90dvh;
        h1,h2{
          font-size: 1.5rem;
          gap: 10px;
          color: #1c306d;
          @media (width <= 470px) {
            font-size: 1.1rem;
          }
          span{
            font-size: 1.1rem;
            @media (width <= 470px) {
              font-size: 0.9rem;
            }
          }
        }
        .stepform__step_formarea_input{
          text-align: center;
          margin: 32px 0;
          justify-content: center;
          display: block;
          @media(width <= 470px){
            margin: 10px 0;
          }

          label{
            input[type="radio"] ,
            input[type="checkbox"]{
              display: none;
            }
            input[type="radio"] + span,
            input[type="checkbox"] + span{
              transition: transform .15s ease, filter .15s ease;
            }            
            input[type="radio"]:active + span,
            input[type="checkbox"]:active + span{
              transform: scale(.98);
              filter: brightness(.96);
            }
            span {
              position: relative;
              display: inline-block;
              margin: 5px 0;
              width: 100%;
              /* height: 56px; */
              line-height: 56px;
              text-align: center;
              font-size: 1.1rem;
              cursor: pointer;
              border-radius: 10px;
              transition: .3s;
              color: #1c306d;
              background-color: #FFF;
              font-weight: 600;
              @media(width <= 470px){
                font-size: 0.9rem;
                line-height: 45px;
              }
            }
            @media (width <= 470px) {
              input[name="Q2"][value="B"] + span {
                font-size: 0.8rem;
              }
            }            
            span::before{
              content: "";
              position: absolute;
              inset: 0;
              border-radius: inherit;
              padding: 2px;
              background: linear-gradient(
                215deg,
                hsl(320, 40%, 63%),
                hsl(290, 35%, 65%) 25%,
                hsl(205, 70%, 54%)50%,
                hsl(245, 35%, 65%) 75%,
                hsl(245, 30%, 55%));
              opacity: 0;
              transition: opacity .25s ease;
              pointer-events: none;

              -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
              -webkit-mask-composite: xor;
                      mask-composite: exclude;
            }
            span:hover::before{
              opacity: 0.6;
            }
            input[type="radio"]:checked + span,
            input[type="checkbox"]:checked + span{
              color: #fff;
              background: hsl(230 50% 70% / 1);
            }             
            input[type="radio"]:checked + span::before,
            input[type="checkbox"]:checked + span::before{
              filter: brightness(.96);
              opacity: 1;
              background: hsl(230 50% 70% / 1);
            } 
            input[type="radio"]:checked + span:hover::before,
            input[type="checkbox"]:checked + span:hover::before{
              opacity: 1;
            }  
          }

        }
        #more_btn:disabled {
            opacity: 0.5;
            pointer-events: none;
          }
        }
      }
      .step[data-step="3"]{
        #more_btn{
          transition: 0.5s ease;
      }
        #more_btn:hover{
          transform: translateY(3px);
        }
      }
      .step.active{
        display: block;
        animation: slide .2s ease;
      }
      @keyframes slide {
        from { transform: translateX(20px); opacity:0; }
        to   { transform: translateX(0); opacity:1; }
      }
    }
  }
  /* ios制御 */
  *{
    -webkit-tap-highlight-color: transparent;
  }
  html, body {
      touch-action: manipulation;
  }
  input[type="radio"],
  input[type="checkbox"] {
      -webkit-appearance: none;
      appearance: none; /* iOS独自UIをリセット */
      outline: none;
  }
  label span {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  label span, input[type="radio"] + span,
  label span, input[type="checkbox"] + span {
      -webkit-tap-highlight-color: transparent;
  }

  /* 結果画面 */
  .result{
    /* background-color: #FFF; */
    border-radius: 15px;
    width: 90%;
    margin: auto;
    padding: 10px;
    display: none;
    .result_box{
      padding: 10px 0 3%;
      max-height: 85dvh;
      .modal-close{
        right: 3%;
        @media(width <= 470px){
          top: 2%;
        }
      }
      h2{
        text-align: center;
        font-size: 1.5rem;
        margin: 10px 0;
        color: #1c306d;
        @media(width <= 470px) {
          font-size: 1.1rem;
        }
        br{
          display: none;
          /* @media(width <= 470px) {
            display: block;
          } */
        }
      }
      .result_img{
        margin: auto;
        width: 87.5%;
        @media(width <= 470px) {
          width: 82.5%;
        }
      }
      .result_cta{
        margin-top: 3%;
        animation: bigger 1.8s infinite;
      }
    }
  }

  #modal.is-open{
      display: flex;
  }
  .modal-close{
    top: 3%;
    position: absolute;
    right: 0;
    border: none;
    background-color: unset;
    color: #1c306d;
    font-size: 1.5rem;
    font-weight: 900;
  }    
  /* result cta animation */
  @keyframes bigger {
    0%,100% {
      transform: scale(0.95);
    }
    50% {
      transform: scale(1);
    }
  }
  /* footer */
  footer{
    padding: 25px 0;
    background: #1C2E6B;
    color: #FFF;
    text-align: center;
    border-bottom: none;
    img{
      width: 80%;
      margin: 10px auto;
    }
  }
  /* form */
  .bg article.form{
    padding-bottom: 40px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    background: unset;
    border: none;

    .content_header{
      margin: 40px auto 0;
      width: 100%;

      .form_content_header{
        background-color: #7A86D2;
        height: 20px;
        border-radius: 20px 20px 0 0;
        width: 90%;
        margin: 0 5%;
      }
      .form_content{
        width: 90%;
        margin: 0 5%;
        padding: 0;
        background-color: #FFF;
        border-radius: 0 0 20px 20px;
        box-shadow: 2px 10px 10px #aaa;

        .step_form_iframe{
          width: 100%;
          max-width: 100%;
        }
      }
    }
  }
  #steps-container {
    position: relative;
    overflow: hidden;
  }
  .stepform,
  .wpcf7-steps {
    position: relative;
    overflow: hidden;
  }
  .wpcf7-step {
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    margin: 0 auto 5%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .wpcf7-step.is-current {
    opacity: 1;
    pointer-events: auto;
    position: relative;
  }
  .wpcf7-list-item{
    margin: 0;
  }
  #steps-container{
    position: relative;
    overflow: hidden;
  }
  .stepform__title{
    background-color: #7A86D2;
    display: flex;
    justify-content: space-evenly;
    color: #fff;
    font-size: 20px;
    font-weight: 550;
    padding: 4% 0;
    width: 90%;
    margin: auto;
    border-radius: 20px 20px 0 0;
  }
  .flex-step{
    padding: 10% 0 0;
    text-align: left;
    font-weight: 700;
    font-size: 1.2rem;
    @media(width <= 470px){
      font-size: 1rem;
      margin-bottom: 10px;
      padding: 15% 0 0;
      color: #555;
    }
    p{
      font-size: 0.9rem;
    }
    p:nth-of-type(2){
      font-weight: 500;
      /* font-size: 0.6rem; */
    }
  }
  .flex-step .required{
      font-size: 0.7rem;
      color: #e01616;
      font-weight: 600;
      margin-left: 6px;
  }
  .flex-step .step-child{
    margin-bottom: 7px;
  }
  .error-info{
    color: rgb(224, 22, 22);
    text-align: left;
    margin: 5px 0 20px;
  }
  .resetflex{
    display: flex;
    justify-content: space-evenly;
    margin: 60px 10px 20px;
    .reset-step,
    .next-step,
    .send-step{
      background-color: #F7AD62;
      color: #1C2E6B;
      width: 25%;
      border-radius: 10px;
      padding: 10px;
      font-weight: 700;
      font-size: 18px;
      text-align: center;
    }
    .send-step{
      background-color: hsl(231.89deg 31.09% 53.33%);
      color: #FFF;
      width: 100%;
      padding: 15px;
      transition: 0.5s ease-in-out;
    }
    .send-step:hover{
      transform: translateY(3px);
    }
  }

  /* アニメ用クラス */
  /* 速さだけでなく“透明化”をやめる */
  .step-enter-right {
    animation: enterFromRight .32s cubic-bezier(.2, .8, .2, 1) forwards;
    z-index: 2;
  }

  .step-exit-left {
    animation: exitToLeft .32s cubic-bezier(.2, .8, .2, 1) forwards;
    z-index: 1;
  }

  .step-enter-left {
    animation: enterFromLeft .32s cubic-bezier(.2, .8, .2, 1) forwards;
    z-index: 2;
  }

  .step-exit-right {
    animation: exitToRight .32s cubic-bezier(.2, .8, .2, 1) forwards;
    z-index: 1;
  }

  /* 透明化しない keyframes（transform のみ） */
  @keyframes enterFromRight {
    from {
      transform: translate3d(30px, 0, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes exitToLeft {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(-30px, 0, 0);
    }
  }

  @keyframes enterFromLeft {
    from {
      transform: translate3d(-30px, 0, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes exitToRight {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(30px, 0, 0);
    }
  }

  /* GPUヒント＆チラつき防止 */
  .wpcf7-step {
    will-change: transform;
    backface-visibility: hidden;
  }

  /* 容器側の再描画を小さく */
  #steps-container {
    contain: layout paint;
  }


  @keyframes enterFromRight {
    from {
      transform: translateX(30px);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes exitToLeft {
    from {
      transform: translateX(0);
      opacity: 1;
    }

    to {
      transform: translateX(-30px);
      opacity: 0;
    }
  }

  @keyframes enterFromLeft {
    from {
      transform: translateX(-30px);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes exitToRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }

    to {
      transform: translateX(30px);
      opacity: 0;
    }
  }

  .wpcf7-step.is-current {
    position: relative;
  }


  /* 確認画面 */
  #step4 .stepform__step_title{
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5%;
    color: #555;
    padding: 5% 0 0 ;
  }
  .stepform__step_formarea{
    dl{
        width: 95%;
        margin: 0 auto 9%;
        text-align: left;
        color: #555;
      dt{
        margin-bottom: 5px;
        font-weight: 700;
        font-size: 1.1rem;
      }
      dd{
        padding: 3px;
        border-bottom: 1px solid #555;
        font-size: 0.97rem;
        @media(width <= 470px){
          padding: 10px 0;
        }
      }
    }
  }
  #trigger-confirmation,
  #place-confirmation {
    line-height: 2;
  }
  #step4 .resetflex{
    flex-direction: column;
    gap: 50px;
    align-items: center;
  }

  /* input radio */
  details summary{
    position: relative;
    list-style: none;
    margin: 20px 0 10px;
    text-align: left;
    padding: 14px 14px 2px;
    font-size: 1rem;
    font-weight: 600;
    color: #1C2E6B;
    border-bottom: 2px solid #1C2E6B;
  }
  details summary:last-of-type{
    margin-top: 10px;
  }
  details summary p{
    display: flex;
  }
  details summary p span{
    display: inline-block;
    /* color: #7A86D2; */
    margin-left: auto;
    transition: 0.3s ease-in-out;
  }
  details[open] summary p span{
    transform: rotate(180deg);
  }
  details:last-of-type p{
    margin-top: 20px;
  }
  details img{
    width: 90%;
    margin: 20px auto 50px;
  }

  .wpcf7-radio{
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .wpcf7-list-item:has(input[type*="radio"]){
      display: inline-block;
      width: 100%;
      position: relative;
      /* margin: 0;
      padding: 10px 5%;
      display: inline-block;
      text-align: center;
      font-size: 1.1rem;
      border-radius: 10px;
      transition: .3s;
      color: #1c306d;
      background-color: #FFF;
      font-weight: 600; */
  }
  .wpcf7-list-item:has(input[type*="radio"])::before{
    /* content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
      215deg,
      hsl(320, 40%, 63%),
      hsl(290, 35%, 65%) 25%,
      hsl(205, 70%, 54%)50%,
      hsl(245, 35%, 65%) 75%,
      hsl(245, 30%, 55%));
    transition: opacity .25s ease;
    pointer-events: none;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude; */
  }

  .wpcf7-list-item:has(input[type*="radio"]) .wpcf7-list-item-label {
    position: relative;
    display: block;
    width: 100%;
    padding: 14px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    color: #1c306d;
    font-weight: 600;
    transition: .3s;
  }
  .wpcf7-list-item:has(input[type*="radio"]) .wpcf7-list-item-label::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
      215deg,
      hsl(320, 40%, 63%),
      hsl(290, 35%, 65%) 25%,
      hsl(205, 70%, 54%)50%,
      hsl(245, 35%, 65%) 75%,
      hsl(245, 30%, 55%));
    transition: opacity .25s ease;
    pointer-events: none;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  .wpcf7-list-item:has(input[type*="radio"]) .wpcf7-list-item-label:hover::before,
  .wpcf7-list-item:has(input[type*="radio"]) .wpcf7-list-item-label:hover{
    opacity: 0.6;
  }
  .wpcf7-list-item:has(input[type*="radio"]:checked) .wpcf7-list-item-label{
    color: #FFF;
    background-color: hsl(230 50% 70% / 1);
  }
  .wpcf7-list-item:has(input[type*="radio"]:checked) .wpcf7-list-item-label::before{
    opacity: 1;
    background: hsl(230 50% 70% / 1);
  }
  .wpcf7-list-item:has(input[type*="radio"]:checked) .wpcf7-list-item-label:hover{
    opacity: 1;
  }

  /* input checkbox */
  #place1,#place2{
    display: flex;
    flex-direction: column;
  }
  .wpcf7-list-item > label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    width: 100%;
  }
  /* inputは隠す */
  .wpcf7-list-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  /* テキスト側 */
  label:has(input[type="checkbox"]) .wpcf7-list-item-label {
    position: relative;
    padding-left: 32px;
    line-height: 1.5;
    font-size: 0.9rem;
    text-align: left;
    margin: 10px 0;
    
  }
  #step1 label:has(input[type="checkbox"]) .wpcf7-list-item-label {
    font-size: 0.9rem;
    user-select: none;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none;    /* Firefox */
      -ms-user-select: none;     /* IE10+ */
    background-position: right top;
    background-size: 355px;
    background-repeat: no-repeat;
    min-height: 125px;
    color:transparent;
    flex: 1;
  }
  #step1 label:has(input[value^="Ｆ："]) .wpcf7-list-item-label {
    background-position: center top;
    background-size: clamp(247px, -43.7px + 77.4vw, 320px);
  }
    @media (width < 470px) {
      #step1 label:has(input[type="checkbox"]) .wpcf7-list-item-label {
          background-size: clamp(285px, -50.5263px + 89.4737vw, 370px);
          min-height: clamp(105px, 26.0526px + 21.0526vw, 125px);
      }
      #step1 label:has(input[value^="Ｆ："]) .wpcf7-list-item-label {
          background-size: clamp(247px, -43.7px + 77.4vw, 320px);
      }
    }
    @media (width < 375px) { 
      #step1 label:has(input[type="checkbox"]) .wpcf7-list-item-label,
      #step1 label:has(input[value^="Ｆ："]) .wpcf7-list-item-label {
          padding-right: 0;
          padding-bottom: 110px;
          background-position: center bottom;
          background-size: min(90%, 280px);
      }
    }
  #step1 label:has(input[value^="Ａ："]) .wpcf7-list-item-label {
      background-image: url(https://event.meetscompany.jp/wp-content/themes/ncwhite/meets-forum/img/checkbox_a.webp);
  }
  #step1 label:has(input[value^="Ｂ："]) .wpcf7-list-item-label {
      background-image: url(https://event.meetscompany.jp/wp-content/themes/ncwhite/meets-forum/img/checkbox_b.webp);
  }
  #step1 label:has(input[value^="Ｃ："]) .wpcf7-list-item-label {
      background-image: url(https://event.meetscompany.jp/wp-content/themes/ncwhite/meets-forum/img/checkbox_c.webp);
  }
  #step1 label:has(input[value^="Ｄ："]) .wpcf7-list-item-label {
      background-image: url(https://event.meetscompany.jp/wp-content/themes/ncwhite/meets-forum/img/checkbox_d.webp);
  }
  #step1 label:has(input[value^="Ｅ："]) .wpcf7-list-item-label {
      background-image: url(https://event.meetscompany.jp/wp-content/themes/ncwhite/meets-forum/img/checkbox_e.webp);
  }
  #step1 label:has(input[value^="Ｆ："]) .wpcf7-list-item-label {
      background-image: url(https://event.meetscompany.jp/wp-content/themes/ncwhite/meets-forum/img/checkbox_f.webp);
  }
  /* チェックボックス枠 */
  label:has(input[type="checkbox"]) .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: #EEE;
    border-radius: 5px;
    transition: .2s;
    margin-top: 4px;
  }
  /* ✓マーク */
  label:has(input[type="checkbox"]) .wpcf7-list-item-label::after {
    content: "✓";
    position: absolute;
    left: 5px;
    top: 0;
    font-size: 18px;
    font-weight: 900;
    color: hsl(231.89deg 31.09% 53.33%);
    transform: scale(0);
    transition: .2s;
  }
  /* checked時 */
  .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background: #E9EBFF;
  }
  .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    transform: scale(1);
  }

  /* trigger */
  .wpcf7-checkbox.trigger{
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  /* agree */
  .stepform__step_agreement{
    margin-top: 10%;
    p{
      margin-bottom: 1rem;
    }
    a{
      display: inline;
    }
  }

  /* input text */
  .wpcf7-step.stepform span:has(input[type="text"]),
  .wpcf7-step.stepform span:has(input[type="tel"]),
  .wpcf7-step.stepform span:has(input[type="email"]){
      width: 90%;
      margin: 0;
      position: relative;
      display: inline-block;
      font-size: 1.1rem;
      border-radius: 10px;
      transition: .3s;
  }
  .wpcf7-step.stepform span input[type="text"],
  .wpcf7-step.stepform span input[type="tel"],
  .wpcf7-step.stepform span input[type="email"]{
    width: 98%;
    padding: 10px 5%;
    border-radius: inherit;
    font-size: 1.1rem;
    color: #555;
    background: #fff;
    position: relative;
    z-index: 0;
    height: 30px;
    border: 1px solid #7A86D2;
    margin-left: 5px;
  }
  .wpcf7-step.stepform span input[type="text"]:focus,
  .wpcf7-step.stepform span input[type="tel"]:focus,
  .wpcf7-step.stepform span input[type="email"]:focus{
      outline: none;
      box-shadow: 0 0 0 2px #7A86D2;
  }


  /* thanks page */
  #thanks{
    background: url(./img/bg.webp) no-repeat center;
    background-size: cover;
    background-color: unset;
    h1{
      color: #1C2E6B;
      margin: 40px 0;
    }
    .box{
      .content{
        p{
          a{display: inline;}
        }
      }
    }
    .box .content{
      background-color: #fff;
      border: 1px solid #7A86D2;
      width: 100%;
      border-radius: 20px;
    }
    .box .content h2{
      font-size: 2rem;
    }
    .box .content h2,
    .box .content h3{
      color: #7A86D2;
    }
    img.sponsor1{
      width: 85%;
    }
  }