@charset "utf-8";
/* ========================
Media Queries
======================== */
@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 1080px) {}

@media screen and (max-width: 1024px) {
  /* ========================
  layout
  ======================== */
  .main .inner {
    padding: 80px 40px;
    max-width: none;
  }

  /* ========================
  page
  ======================== */
  /* ------------------------
   point
  ------------------------ */
  .point li img {
    width: 100%;
    max-width: 240px;
  }
}

@media screen and (max-width: 980px) {}

@media screen and (max-width: 979px) {}

@media screen and (max-width: 919px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 768px) and (max-height: 1024px) {}

@media screen and (max-width: 767px) {
  /* ========================
  layout
  ======================== */
  .main .inner {
    padding: 80px 20px;
  }

  /* ========================
  module
  ======================== */
  /* ------------------------
  header
  ------------------------ */
  #header .h-nav ul + ul,
  #header .h-nav .btn {
    border-left-style: none;
    margin: 0;
  }

  #header .h-nav .btn-login a {
    background-position: center 30%;
    background-repeat: no-repeat;
    background-size: auto 50%;
  }

  #header .h-nav .btn-login a:before {
    content: "ログイン";
    top: 70%;
  }

  #header .h-nav .btn-logout a {
    background-position: center 30%;
    background-repeat: no-repeat;
    background-size: auto 50%;
  }

  #header .h-nav .btn-logout a:before {
    content: "ログアウト";
    top: 70%;
  }

  #header .h-nav .btn-user a {
    background-image: url(../img/theme/ic_person_w_48.png);
    background-position: center 30%;
    background-repeat: no-repeat;
    background-size: auto 50%;
  }

  #header .h-nav .btn-user a:before {
    content: "アフィリエイターログイン";
    top: 60%;
  }

  #header .h-nav .btn-adv a {
    background-image: url(../img/theme/ic_person_w_48.png);
    background-position: center 30%;
    background-repeat: no-repeat;
    background-size: auto 50%;
  }

  #header .h-nav .btn-adv a:before {
    content: "広告主\Aログイン";
    top: 60%;
    white-space: pre;
  }

  /* ========================
  page
  ======================== */
  /* ------------------------
  inner
  ------------------------ */
  .hero.flex-wrap .inner {
    padding: 100px 20px 80px;
  }

  /* ------------------------
   contact
  ------------------------ */
  .contact-tel a {
    font-size: calc(2.5rem + ((1vw - 7.67px) * 0.9828));
  }
}

@media screen and (max-width: 568px) {
  /* ========================
  page
  ======================== */
  /* ------------------------
   contact
  ------------------------ */
  .box.contact-email {
    margin-top: 20px;
  }
}

@media screen and (max-width: 567px) {
  /* ========================
  product module
  ======================== */
  /* ------------------------
  list
  ------------------------ */
  .list-reason li {
    width: 100%;
    max-width: none;
  }

  /* ------------------------
  flow
  ------------------------ */
  .flow .list-flow img {
    width: 100%;
  }

  .list-flow li .box {
    margin: 0;
    padding: 30px 20px 20px;
    width: 100%;
  }

  .flow .list-flow .box {
    margin: 0;
  }

  /* ========================
  page
  ======================== */
  /* ------------------------
   reason
  ------------------------ */
  .list-reason li {
    width: 100%;
    max-width: none;
  }

  /* ------------------------
   flow
  ------------------------ */
  .flow .list-flow img {
    width: 100%;
  }

  .list-flow li .box {
    margin: 0;
    padding: 30px 20px 20px;
    width: 100%;
  }

  .flow .list-flow .box {
    margin: 0;
  }

  /* ------------------------
   faq
  ------------------------ */
  .faq .list-faq {
    padding: 10px 20px;
  }
}

@media screen and (max-width: 360px) {
  /* ========================
  page
  ======================== */
  /* ------------------------
  inner
  ------------------------ */
  .hero.flex-wrap .inner,
  .member .inner {
    padding: 40px 10px;
  }

  /* ------------------------
   hero
  ------------------------ */
  .hero h1 {
    font-size: 214.29%;
    margin: 0 10px;
  }

  /* ------------------------
   contact
  ------------------------ */
  .contact-tel a {
    font-size: 257.2%;
  }
}

@media screen and (max-width: 320px) {}

@media screen and (max-height: 414px) {}

@media screen and (max-width: 568px) and (max-height: 320px) {}