.top-download-newsletter-wrapper {
  padding-bottom: 60px;
  padding-top: 60px
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper {
      padding-bottom: 120px;
      padding-top: 100px;
  }
}

@media screen and (min-width: 992px) {
  .top-download-newsletter-wrapper {
      padding-bottom:160px;
      padding-top: 160px
  }
}

.top-download-newsletter-wrapper .main {
  margin-left: auto;
  margin-right: auto;
  max-width: 1349px;
  padding-left: 1rem;
  padding-right: 1rem
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main {
      padding-left: 40px;
      padding-right: 40px
  }
}

@media screen and (min-width: 992px) {
  .top-download-newsletter-wrapper .main {
      padding-left: 1rem;
      padding-right: 1rem
  }
}

.top-download-newsletter-wrapper .main h2 {
  background: url(https://www.jbnet.jp/hubfs/JBNet_November2023/download-title-bg.svg) no-repeat 0 0;
  background-size: 30px 30px;
  font-family: Montserrat,sans-serif;
  font-size: 20px;
  margin-bottom: 16px;
  padding-top: 60px
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main h2 {
      background-size:50px 50px;
      font-size: 24px;
      padding-top: 90px
  }
}

@media screen and (min-width: 1120px) {
  .top-download-newsletter-wrapper .main h2 {
      font-size: 30px;
  }
}

.top-download-newsletter-wrapper .main h2 small,.top-download-newsletter-wrapper .main h2 span {
  display: block
}

.top-download-newsletter-wrapper .main h2 small {
  color: hsla(0,0%,7%,.4);
  font-size: 12px;
  margin-bottom: 7px
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main h2 small {
      background-size:50px 50px;
      font-size: 13px
  }
}

.top-download-newsletter-wrapper .main h2 span {
  color: hsla(0,0%,7%,.6);
  font-size: 12px;
  margin-top: 7px
}

.top-download-newsletter-wrapper .main h2+p {
  color: hsla(0,0%,7%,.6);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5
}

.top-download-newsletter-wrapper .main h2+p a {
  color: inherit;
  text-decoration: underline
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main .top-dowload-newsletter-row>div:first-child .box-inner {
      padding-right:43%
  }
  .top-download-newsletter-wrapper .main h2+p a:hover {
      text-decoration: none
  }
}

.top-download-newsletter-wrapper .main .top-dowload-newsletter-row>div:first-child .image-box {
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 200px
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main .top-dowload-newsletter-row>div:first-child .image-box {
      position:absolute;
      right: 68px;
      top: 140px;
      width: 30%;
  }
}

@media screen and (min-width: 992px) {
  .top-download-newsletter-wrapper .main .top-dowload-newsletter-row>div:first-child .image-box {
      top: 165px;
  }
}

.top-download-newsletter-wrapper .main .top-dowload-newsletter {
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 20px;
  padding-right: 20px
}

.top-download-newsletter-wrapper .main .top-dowload-newsletter .top-dowload-newsletter-row>div:first-child {
  margin-bottom: 20px
}


@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main .top-dowload-newsletter .top-dowload-newsletter-row>div:first-child {
      margin-bottom: 40px
  }
}

@media screen and (min-width: 992px) {
  .top-download-newsletter-wrapper .main .top-dowload-newsletter .top-dowload-newsletter-row>div:first-child {
      margin-bottom:0
  }
}

.top-download-newsletter-wrapper .main .top-dowload-newsletter .top-dowload-newsletter-row>div:last-child h2 {
  background-image: url(https://www.jbnet.jp/hubfs/JBNet_November2023/top/newsletter-title-bg.svg)
}

.top-download-newsletter-wrapper .main .top-dowload-newsletter .top-dowload-newsletter-row>div .box {
  background-color: #d5d5d5;
  border-radius: 15px;
  height: 100%;
  padding: 40px 30px
}

.top-download-newsletter-wrapper .main .top-dowload-newsletter .top-dowload-newsletter-row>div .box > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main .top-dowload-newsletter .top-dowload-newsletter-row>div .box {
      padding:50px 50px 60px 50px
  }
}

.top-download-newsletter-wrapper .main .form-box {
  margin-top: 30px;
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main .form-box {
    margin-top: 20px;
  }
}

.top-download-newsletter-wrapper .main .form-box form {
  display: flex;
  width: 100%
}

.top-download-newsletter-wrapper .main .form-box .hs-email {
  -ms-flex-preferred-size: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-basis: 0;
  flex-grow: 1;
  margin: 0 8px 0 0;
  max-width: 100%
}

.top-download-newsletter-wrapper .main .form-box .input input {
  border-color: #fff;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0;
  padding-bottom: 12px;
  padding-top: 12px;
  padding-left: 45px;
  background: url(https://www.jbnet.jp/hubfs/JBNet_November2023/ico-mail.svg) no-repeat #fff 18px 50%;
  background-size: 18px 14px;
  min-height: 46px;
  max-height: 46px;
}

.top-download-newsletter-wrapper .main .form-box .input input::placeholder {
  color: hsla(0,0%,7%,.3)
}

.top-download-newsletter-wrapper .main .form-box .hs-submit input {
  border-radius: 0!important;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  padding: 14px 20px;
  min-height: 46px;
}

.top-download-newsletter-wrapper .main .btn {
  margin-bottom: 0;
  text-align: right
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main .btn {
      margin-top: 33px;
      text-align: left
  }
}

@media screen and (min-width: 992px) {
  .top-download-newsletter-wrapper .main .btn {
      margin-top:60px;
  }
}

.top-download-newsletter-wrapper .main .btn a {
  background: url(https://www.jbnet.jp/hubfs/JBNet_November2023/ico-angle-r2.svg) no-repeat 100% 50%;
  background-size: 7px 11px;
  display: inline-block;
  font-size: 14px;
  padding-right: 15px;
}

@media screen and (min-width: 768px) {
  .top-download-newsletter-wrapper .main .btn a:hover {
      text-decoration: underline
  }
}

body: not(.front) .top-download-newsletter-wrapper {
  background-color:#f5f5f5;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0
}

body:not(.front) .top-download-newsletter-wrapper .main {
  border-top: 1px solid hsla(0,0%,7%,.1);
  padding-top: 20px
}

@media screen and (min-width: 768px) {
  body:not(.front) .top-download-newsletter-wrapper .main {
      padding-top:100px
  }
}