@import "p-form.css";

.sec-download {
  
  --d-col-w: 561px; 
  --d-col-gap: 32px; 
  --d-card-r: 10px; 
  --d-card-pad-l: 50px; 
  --d-card-pad-r: 40px; 
  --d-card-pad-t: 54px; 
  
  --d-card-pad-b: 58px;
  --d-img-r: 8px; 

  padding-block: 79px 160px; 
  background: var(--bg-base);
}

.sec-download .form {
  --form-label-wt: 700;
}

@media (min-width: 768px) {
  .sec-download .form {
    --form-agree-mt: 24px; 
    --form-agree-gap: 15px; 
    --form-submit-gap: 65px; 
  }
}

.sec-download__head::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--text-strong);
}

.sec-download__title {
  margin-top: 9px; 
  font-size: var(--fs-h2); 
  font-weight: 700;
  line-height: 64px;
}

.sec-download__lead {
  margin-top: 20px; 
  font-size: var(--fs-body); 
  font-weight: 400;
  line-height: 1;
}

.sec-download__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px var(--d-col-gap);
  margin-top: 87px; 
  align-items: start;
}

.sec-download__figure {
  display: block;
}

.sec-download__img {
  width: 100%;
  height: auto;
  border-radius: var(--d-img-r);
}

.sec-download__note {
  margin-top: 40px; 
  font-size: var(--fs-xs); 
  font-weight: 700;
  line-height: 24px;
}

.sec-download__card {
  
  margin-top: 2px;
  padding: var(--d-card-pad-t) var(--d-card-pad-r) var(--d-card-pad-b)
    var(--d-card-pad-l);
  border-radius: var(--d-card-r);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.sec-download__form-title--sp {
  display: none;
}

@media (max-width: 1099px) {
  .sec-download__cols {
    grid-template-columns: minmax(0, 1fr);
    width: min(var(--d-col-w), 100%);
    margin-inline: auto;
  }

  .sec-download__card {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .sec-download {
    --d-card-r: 6px; 
    --d-card-pad-l: var(--sp-gutter); 
    --d-card-pad-r: var(--sp-gutter);
    --d-card-pad-t: 47px; 
    --d-card-pad-b: 60px; 
    --d-img-r: 0px; 

    
    padding-block: 33px 104px; 
  }

  .sec-download__title {
    margin-top: 10px;
    font-size: var(--sp-fs-hero); 
    line-height: 42px;
  }

  .sec-download__lead {
    margin-top: 8px; 
    font-size: var(--sp-fs-body); 
    line-height: 24px;
  }

  .sec-download__cols {
    gap: 40px; 
    width: auto;
    margin-top: 21px; 
  }

  
  .sec-download__figure {
    width: calc(100% + 158.7px);
    margin-left: calc(var(--sp-gutter) * -1 - 78px);
    margin-right: calc(var(--sp-gutter) * -1 - 68.7px);
    
    background: radial-gradient(
      120% 150% at 98% 4%,
      #bcc6d1 0%,
      #929ca8 100%
    );
  }

  .sec-download__note {
    margin-top: 21px; 
  }

  .sec-download__form-title--pc {
    display: none;
  }

  .sec-download__form-title--sp {
    display: inline;
  }
}