:root {
    /*　ロゴはキャンペーンごとに使用したい方を設定する　背景色は個別で指定
      白抜き：/images/sp/purchase/common/brandear_logo02.png　色付き：/images/sp/common/logo_brandear_default.png */
    --brandear-logo: url(/images/sp/common/logo_brandear_default.png) center / contain no-repeat;
    --background-color-logo: #fff;

    /* テキストや背景色のカラー設定 */
    --color-main: #D81267;
    /* ボタン・フッター・アイコン */
    --color-accent: #3DA99D;
    /* 戻るボタン */
    --color-sub: #333;
    /* 基本テキストカラー */
    --color-white: #fff;
    /* 白 */
    --color-line: #ccc;
    /* 線 */
    --content-background: #D81267;
    /* コンテンツごとの背景色 */
    --pc-background: #fefefe;
    /* PCの背景色 */
    --copyright-background: #3DA99D;
    /* 下部コピーライティング背景色 */
    --copyright-font-color: #fff;
    /* 下部コピーライティングフォントカラー */
    --filter-color: brightness(0) saturate(100%) invert(53%) sepia(81%) saturate(292%) hue-rotate(124deg) brightness(93%) contrast(93%);
    /* アイコンカラー */
    --filter-white: invert(100%) sepia(0%) saturate(7485%) hue-rotate(169deg) brightness(108%) contrast(98%);
    /* アイコンフィルタカラー白 */


    /* あらかじめ和文欧文共に3種類のウェイトをダウンロードしておく 3種類無い場合は --weight-bold～--weight-lightの指定がうまく作動しないので直書きで対応
     フォント指定 ゴシック:'Montserrat','Noto Sans JP' 明朝:'Source Serif Pro', 'Noto Serif JP' */
    --font-family: 'Montserrat', 'Noto Sans JP', sans-serif, arial, helvetica, clean;
    --weight-bold: bold;
    --weight-normal: normal;
    --weight-light: lighter;

    --font-sp1: clamp(0.625rem, 0.401rem + 1.12vw, 0.938rem);
    /* 10~15px */
    --font-sp2: clamp(0.75rem, 0.526rem + 1.12vw, 1.063rem);
    /* 12~17px */
    --font-sp3: clamp(0.875rem, 0.651rem + 1.12vw, 1.188rem);
    /* 14~19px */
    --font-sp4: clamp(1rem, 0.776rem + 1.12vw, 1.313rem);
    /* 16~21px */
    --font-sp5: clamp(1.125rem, 0.901rem + 1.12vw, 1.438rem);
    /* 18~23px */
    --font-sp6: clamp(1.25rem, 1.026rem + 1.12vw, 1.563rem);
    /* 20~25px */
    --font-sp7: clamp(1.563rem, 1.339rem + 1.12vw, 1.875rem);
    /* 25~30px */
    --font-sp8: clamp(2.188rem, 1.964rem + 1.12vw, 2.5rem);
    /* 35~40px */

    --font-pc1: clamp(0.625rem, 0.071rem + 1.15vw, 0.938rem);
    /* 10~15px */
    --font-pc2: clamp(0.75rem, 0.196rem + 1.15vw, 1.063rem);
    /* 12~17px */
    --font-pc3: clamp(0.875rem, 0.321rem + 1.15vw, 1.188rem);
    /* 14~19px */
    --font-pc4: clamp(0.938rem, 0.384rem + 1.15vw, 1.25rem);
    /* 15~20px */
    --font-pc5: clamp(1.125rem, 0.571rem + 1.15vw, 1.438rem);
    /* 18~23px */
    --font-pc6: clamp(1.25rem, 0.696rem + 1.15vw, 1.563rem);
    /* 20~25px */
    --font-pc7: clamp(1.563rem, 1.009rem + 1.15vw, 1.875rem);
    /* 25~30px */
    --font-pc8: clamp(1.875rem, 1.321rem + 1.15vw, 2.188rem);
    /* 30~35px */
  }

  /* テキストのカラーを変更 */
  h2 {
    margin-top: 20px;
    color: var(--color-white);
  }

  #special_contents {
    background: #fcfcfc;
    padding: 50px 20px;
    font-size: var(--font-sp2);
    text-align: left;
  }

  #special_contents p,
  ul {
    padding-bottom: 20px;
  }

  #special_contents li a {
    text-decoration: underline !important;
    line-height: 2.0;
    color: var(--color-sub);
  }

  /* 注釈 */
  #use_step .step_text .note,
  .linecp .note {
    margin-top: 3px;
    padding-left: 1em;
    text-indent: -1em;
    font-size: var(--font-sp2);
    color: var(--color-main);
  }

  #reference_price .price_note {
    margin-top: .4em;
    padding-left: 1em;
    text-indent: -1em;
    text-align: left;
    font-size: var(--font-sp2);
  }

  #reference_price ul+.price_note {
    margin-top: 20px;
  }

  /* ご利用方法*/
  #use_step {
    padding-bottom: 10px;
  }

  #use_step ul {
    margin-top: 30px;
  }

  #use_step ul li {
    position: relative;
    grid-template-columns: 0.8fr 2.2fr;
    background: var(--color-white);
    padding: 20px 15px;
    border-radius: 8px;
  }

  #use_step ul li:nth-of-type(1):after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-top: 10px solid #fff;
    border-bottom: 0;
    bottom: -15px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }


  /*キャンペーン詳細*/
  #attention {
    background: var(--color-white);
  }

  #attention h2 {
    color: var(--color-sub);
  }

  #attention dl dt {
    border: initial;
    font-size: var(--font-sp3);
    color: var(--color-white);
    background-color: var(--color-accent);
    width: fit-content;
    padding: 3px 7px 0;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }

  #attention dl dd.or {
    color: var(--color-main);
    margin-top: 5px;
  }

  .bg_color {
    background: var(--content-background);
    padding: 20px 0;
  }

  #attention .shousainote {
    margin-top: .3em;
  }

  #attention .shousaibullet {
    margin-top: 0.7em;
    padding-left: 1em;
    text-indent: -1em;
  }

  /*終了後*/
  #main_items a {
    background: var(--color-main);
  }

  #main_items .view_timer {
    display: none;
  }


  /*　画面サイズが768px以上の場合読み込む　*/
  @media screen and (min-width:768px) {
    section:not(#main_items):not(.background_color):not(.order_sect) {
      margin: 70px 50px !important;
    }

    .background_color {
      padding: 60px 70px;
    }

    #use_step {
      padding-bottom: 60px;
    }

    #use_step .step_text .note,
    #reference_price .price_note,
    #order_modal p,
    .linecp .note {
      font-size: var(--font-pc1);
    }

    #use_step ul li {
      padding: 30px 30px 30px 15px;
      grid-template-columns: 0.7fr 2.3fr;
    }

    .container {
      padding-bottom: 1px;
      box-shadow: 0px 0px 15px -5px #c0baaa;
    }

    #attention dl dt {
      padding: 5px 10px 2px;
      margin-bottom: 15px;
    }

    #main_items .end_box {
      padding: 70px 15px;
    }

    .order_sect {
      margin: 0 !important;
      padding: 0 70px 20px;
    }

    #special_contents {
      padding: 70px 50px;
      font-size: var(--font-pc2);
      text-align: left;
    }
  }