@charset "UTF-8";

html {
  background-color: #fff;
}

body {
  margin: auto;
  background-color: #fff;
}

.pc_block {
  display: none;
  @media screen and (min-width: 798px) {
    display: block;
  }
}

.sp_block {
  display: block;
  @media screen and (min-width: 798px) {
    display: none;
  }
}

/* ここからページオリジナル */
#main-visual {
  text-align: center;
  padding: 0;
  margin-top: 3em;

  img {
    margin: 0 auto;
  }
}

#campaign {
  .content_inner {
    max-width: 760px;
    margin: 0 auto;
  }

  .ttl {
    font-size: 20px;
    @media screen and (min-width: 480px) {
      font-size: 24px;
    }
    span {
      position: relative;
      display: inline-block;
      background: #FFF100;
      padding: 0.2em 2em;

      &::before {
        position: absolute;
        content: '';
        left: -1px;
        top: 0;
        width: 20px;
        height: 39px;
        background: #fff;
        clip-path: polygon(0 0, 100% 50%, 0 100%);

        @media screen and (min-width: 480px) {
          height: 46px;
        }
      }

      &::after {
        position: absolute;
        content: '';
        right: -1px;
        top: 0;
        width: 20px;
        height: 39px;
        background: #fff;
        clip-path: polygon(100% 0, 0 50%, 100% 100%);

        @media screen and (min-width: 480px) {
          height: 46px;
        }
      }
    }
  }

  .sub_ttl {
    color: #00A051;
  }

  .txt {
    font-size: 16px;
    line-height: 2;
    margin: 1em 0;
  }

  .note {
    font-size: 12px;
    margin: 1em 0;
  }

  .underline {
    position: relative;
    display: inline-block;
    z-index: 1;

    &::before {
      position: absolute;
      content: '';
      left: 0;
      bottom: 3px;
      background: #FFF100;
      width: 100%;
      height: 11px;
      z-index: -1;
    }
  }

  .article {
    text-align: center;

    .box {
      background: #F6F6F6;
      border-radius: 14px;
      padding: 1em;
      margin: 1em 0;
    }
  }

  .campain_detail {
    position: relative;
    content: '';

    @media screen and (min-width: 950px) {
    &::before {
      position: absolute;
      content: '';
      background: url(../10000campaign/img/illust_coupon.png) center / contain no-repeat;
      width: 220px;
      height: 120px;
      top: 100px;
      right: -120px;
    }
  }
  }

  .new_register {
    position: relative;
    content: '';

    @media screen and (min-width: 950px) {
    &::before {
      position: absolute;
      content: '';
      background: url(../10000campaign/img/illust02.png) center / contain no-repeat;
      width: 150px;
      height: 140px;
      top: 75px;
      left: -120px;
    }
  }

  }

}