@charset "utf-8";

/*--------------------------------------
このbase_formatはmax-width:885pxメインと
なっているがレスポンシブは基本は下記サイズから
@media screen and (max-width:767px)
---------------------------------------*/
@media screen and (max-width:767px){
  /*——————————————————————
  display: block;
  ——————————————————————*/
  html {
    font-size: 60%;
  }
  .display_flex,.sp-only_01{
    display: block;
  }

  /*——————————————————————
  メインBOX指定
  ——————————————————————*/

  .field,.entry{
    width: 100%;
  }

  .entry._01{
    padding: 0 1rem;
  }

  .inner._01{
    width: 90%;
  }


  h1{
    font-size: 4.6rem;
    line-height: 6.6rem
  }

  .product-copy{
    font-size: 2.8rem;
    line-height: 4.2rem;
  }

  .coupon-pict{
    width: 100%;
    padding: 1rem 0;
    margin-bottom: 1rem;
  }
  
  .product-image{
    padding: 0;
  }

  .capacity,.coupon-box-out,.coupon-box-out._a{
    font-size: 1.6rem;
    line-height: 3rem;
  }

  .product_title,.product_price{
    font-size: 2rem;
  }

  .page_top{
    bottom: 20rem;
  }
  /*——————————————————————
  footer_SP
  ——————————————————————*/

footer{
  width: 100%;
}

  /*--------------------------
  display:none
  ---------------------------*/

  .global_menu,.abc_icon.pc-only,.sp-only_02,.mail_form,.header_inner.open .fs-logo,.pick_up_article,.tower{
    display: none;
  }

  .pc-only{
    display: none !important;
  }
}

  /*——————————————————————————————————————————————————————
  ————————————————————————————————————————————————————————
  以下の文言で幅600以下で一定の条件を満たしたアイテムすべて半分になる
  ————————————————————————————————————————————————————————
  ———————————————————————————————————————————————————————*/
  @media only screen and (max-width: 600px) {
    html {
      font-size: 50%;
    }
    .product{
      width: 100%;
    }
    .product_list{
      justify-content: center;
    }

  }

  @media screen and (max-width:546px){
    
    h1{
      bottom: 12rem;
    }
    h2{
      font-size: 2.2rem;
    }
    .h1_title{
      width: 16rem;
    }
    .logo img{
      width: 12rem;
    }

    .coupon-code-no._a{
      font-size: 1.6rem;
      top: 1.6rem;
    }
  
    .left-half,.right-half{
      height: 56%;
    }
    
    .momijis_01{
      display: none;
    }
  }

  @media screen and (max-width:375px){
    html {
      font-size: 40%;
    }
    /*——————————————————————
    display: block;
    —————————————————————*/
    .sp-only_02{
      display: block;
    }
  }