@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: 'Sharp Sans Medium';
  margin: 0rem;
  color: #454545;
}
.content {
  margin: auto;
  max-width: 1024px;
  padding: 0 24px;
}
@media only screen and (max-width: 800px) {
  .content {
    padding: 0 19px;
  }
}
.couple {
  width: 100%;
  height: 550px;
  background-image: url('/images/aff/couple.png');
  background-position: 50%;
  background-size: cover;
  padding-top: 26px;
  color: white;
}
@media only screen and (max-width: 800px) {
  .couple {
    background-image: url('/images/aff/image-full.png');
    height: 300px;
    background-position-x: 67.5%;
    background-position-y: 25%;
    background-size: initial;
    padding-top: 19px;
  }
}
.couple .banner-content {
  height: 100%;
}
@media only screen and (min-width: 1920px) {
  .couple {
    height: calc(100vw * 55 / 192);
  }
}
.couple header {
  height: 43px;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 800px) {
  .couple header {
    height: 31px;
  }
}
.couple header .logo {
  background-image: url('/images/aff/logo.png');
  background-image: -webkit-image-set(
    url('/images/aff/logo.png') 1x,
    url('/images/aff/logo@2x.png') 2x,
    url('/images/aff/logo@3x.png') 3x
  );
  background-image: image-set(
    url('/images/aff/logo.png') 1x,
    url('/images/aff/logo@2x.png') 2x,
    url('/images/aff/logo@3x.png') 3x
  );
  height: 43px;
  width: 157px;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 800px) {
  .couple header .logo {
    background-image: url('/images/aff/logo-m.png');
    background-image: -webkit-image-set(
      url('/images/aff/logo-m.png') 1x,
      url('/images/aff/logo-m@2x.png') 2x,
      url('/images/aff/logo-m@3x.png') 3x
    );
    background-image: image-set(
      url('/images/aff/logo-m.png') 1x,
      url('/images/aff/logo-m@2x.png') 2x,
      url('/images/aff/logo-m@3x.png') 3x
    );
    width: 113px;
    height: 31px;
    background-repeat: no-repeat;
  }
}
.couple header .menu {
  display: flex;
  justify-content: center;
  font-size: 0.9375rem;
}
.couple header .menu .menu-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.couple header .menu .menu-item.about {
  padding-right: 42px;
}
.couple header .menu .menu-item.stories {
  padding-left: 42px;
  padding-right: 42px;
}
.couple header .menu .menu-item.login {
  padding-left: 42px;
}
@media only screen and (max-width: 800px) {
  .couple header .menu {
    display: none;
  }
}
@media only screen and (min-width: 801px) {
  .couple header .menu-m {
    display: none;
  }
}
.couple header .menu-m {
  background-image: url('/images/aff/menu.png');
  background-image: -webkit-image-set(
    url('/images/aff/menu.png') 1x,
    url('/images/aff/menu@2x.png') 2x,
    url('/images/aff/menu@3x.png') 3x
  );
  background-image: image-set(
    url('/images/aff/menu.png') 1x,
    url('/images/aff/menu@2x.png') 2x,
    url('/images/aff/menu@3x.png') 3x
  );
  background-repeat: no-repeat;
  background-position: calc(100% - 15px);
  width: 35px;
  margin-right: -0.9375rem;
  position: relative;
}
.couple header .menu-m .menu-c {
  width: 243px;
  position: absolute;
  right: 15px;
  right: 6px;
  top: -9px;
}
.couple header .menu-m .menu-c .header {
  height: 60px;
  background: #fe7c7c;
  border-radius: 10px 10px 0px 0px;
  position: relative;
}
.couple header .menu-m .menu-c .header .close {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAJFBMVEUAAAD///////////////////////////////////////////+0CY3pAAAAC3RSTlMAFffm79SAZCIzy11G2mEAAAC/SURBVBjTVZE9DoJAEIWHSssB5QCLjQmVJlZWlMYjeAQaj2A8gfew4ic0czkX3/ImkJDl5bHfzpeV7Cn+bF5SVMqYnY/S2om5tEkKG3WpH9ZJdrWQ8s76WO1tUK/jUluTalOso6IO+O/+P6JMdSREzsztEOfPJtY9BytsyAGXhXDh7nQU4CRgN/MXQ7qYQZNiB2pCLIemi0GTYtSEmGtCzDUhRk2BGDUBp6YCTs0gbXx9rknetfrc1U22q/v8/AAVME1C6jTN/QAAAABJRU5ErkJggg==');
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px);
  height: 100%;
  width: 45px;
  position: absolute;
  right: 0;
}
.couple header .menu-m .menu-c a:last-child .item {
  border-radius: 0px 0px 10px 10px;
}
.couple header .menu-m .menu-c .item {
  height: 60px;
  background: white;
  border-bottom: 1px solid #00000016;
  color: #454545;
  line-height: 60px;
  padding-left: 14px;
  font-family: 'Sharp Sans Bold';
  font-size: 0.875rem;
}
.couple .headline-c {
  height: calc(100% - 43px);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.couple .headline-c .headline {
  width: 448px;
  height: 138px;
  font-size: 2.25rem;
  font-family: 'Oswald';
  font-weight: 500;
  line-height: 46px;
}
@media only screen and (max-width: 800px) {
  .couple .headline-c .headline {
    width: 300px;
    font-size: 1.5rem;
    height: 98px;
    line-height: 32px;
    margin-top: 25%;
  }
}
@media only screen and (max-width: 359px) {
  .couple .headline-c .headline {
    font-size: 1.375rem;
  }
}
.text {
  padding-top: 71px;
}
@media only screen and (max-width: 800px) {
  .text {
    padding-top: 42px;
  }
}
.text .title {
  font-family: 'Sharp Sans Bold';
  font-size: 1.5rem;
}
@media only screen and (max-width: 800px) {
  .text .title {
    font-size: 1.25rem;
  }
}
.text .expl {
  font-size: 1rem;
  padding-top: 23px;
}
@media only screen and (max-width: 800px) {
  .text .expl {
    font-size: 0.9375rem;
  }
}
.text .btn {
  margin-top: 3.625rem;
}
@media only screen and (max-width: 800px) {
  .text .btn {
    margin-top: 2.8125rem;
  }
}
.text .btn .btn-cta {
  width: 502px;
  height: 56px;
  background-image: linear-gradient(135deg, #8ddc7d, #3dbf9e);
  border-radius: 28px;
  color: white;
  font-family: 'Sharp Sans Bold';
  font-size: 1.125rem;
  margin: auto;
  box-shadow: 0px 4px 7px 0 rgba(84, 146, 68, 0.25);
  display: flex;
}
@media only screen and (max-width: 800px) {
  .text .btn .btn-cta {
    width: 100%;
    max-width: 414px;
    font-size: 0.875rem;
    position: relative;
  }
}
.text .btn .btn-cta .cta {
  display: flex;
  margin: auto;
  height: 23.5px;
}
@media only screen and (max-width: 800px) {
  .text .btn .btn-cta .cta {
    justify-content: center;
    flex-direction: column;
  }
}
@media only screen and (max-width: 800px) {
  .text .btn .btn-cta .cta .cta-text {
    text-align: center;
    width: 185px;
  }
}
.text .btn .btn-cta .cta .arrow {
  background-image: url('/images/aff/arrow.png');
  background-image: -webkit-image-set(
    url('/images/aff/arrow.png') 1x,
    url('/images/aff/arrow@2x.png') 2x,
    url('/images/aff/arrow@3x.png') 3x
  );
  background-image: image-set(
    url('/images/aff/arrow.png') 1x,
    url('/images/aff/arrow@2x.png') 2x,
    url('/images/aff/arrow@3x.png') 3x
  );
  width: 21px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 100% 50%;
}
@media only screen and (max-width: 800px) {
  .text .btn .btn-cta .cta .arrow {
    position: absolute;
    right: 24px;
  }
}
@media only screen and (min-width: 801px) {
  .mob {
    display: none;
  }
}
.footer {
  text-align: center;
  background-image: linear-gradient(135deg, #f2b07b, #fe7c7c);
  height: 97px;
  color: white;
  margin-top: 4.6875rem;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 800px) {
  .footer {
    margin-top: 2.875rem;
  }
}
img {
  display: block;
}
p {
  margin: 0;
}
a {
  color: unset;
  text-decoration: none;
}
.cta-link {
  display: flex;
  margin: auto;
  height: 100%;
  width: 100%;
}

.hide {
  display: none;
}
.logo-link {
  width: 100%;
  height: 100%;
  display: block;
}