@charset "UTF-8";
/* CSS Document */

* {box-sizing: border-box;}
body { margin: 0;}

main {
    background-color: #000000;
    text-align: center;
}

.bgc {

    /* background-color:  #ededed; */
    background: #4D4D4D;
    max-width: 1150px;
    margin: 0 auto ;
    padding: 0 0 1px 0;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 30px;
    border-color: #161616;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,50%));

    /* background-color: #4D4D4D;
    max-width:  950px;
    margin: 0 auto;
    padding-bottom: 5%;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,10%)); */
}

img {
   margin: 0 auto;
   max-width: 100%;
}

.SP_Only{
	display: none;
}

   /* ============ クーポンエリア ============ */

    .coupon_wrapper {
         margin: 0 auto 5% 0;
     }

     .coupon_title {
         width: 90%;
         margin: 5% auto 4% auto;
     }

     /* .coupon_wrapper ul {
         display: flex;
         width: 90%;
         margin: 0 auto 2% auto;
         justify-content: space-between; 
         align-items: center;
         padding-inline-start: unset;
         background-color: #fff;
         border-radius: 4px;
     }

     .coupon_ul li {
         list-style: none;
         padding : 3% 4% 0.5% 4%;
         margin-bottom: 2%;
     } */

     .coupon_box {
       background-color: #fff;
       border-radius: 5px;
       width: 90%;
       padding: 5% 5% 5% 5%;
       margin: 0 auto 5% auto;
       text-align: center;
     }

     .code_title {
       margin-top: 8%;
     }

     .code_box {
       background-color: #c20000;
       color: #fff;
       font-size: 80px;
       font-weight: 800;
       font-family: "din-2014", sans-serif;
       font-weight: 700;
       font-style: normal;
       margin: 1% auto ;
       line-height: 100px;
     }

     .coupon_img {
      margin-bottom: 0;
     }

     .code_caution{
       text-align: left;
       margin: -4% auto 0 auto;
       padding:0 0 0 5%;
       line-height: 25px;
     }

     .coupon_btn{
         transition: all 150ms ease-in-out;
     }

     .coupon_btn:hover {
         opacity: 70%;
     }

     /* ============ 割引商品エリア ============ */

     .product_title {
      width: 90%;
      margin: 10% auto 5% auto;
  }

     .product_wrapper {
         padding: 0;
         margin: 0 auto 10% auto;
     }

     .product_wrapper ul {
         display: flex;
         width: 90%;
         margin: 3% auto 0 auto;
         justify-content: space-between; 
         align-items: center;
         padding-inline-start: unset;
         align-items: stretch;
     }

     .product_ul li {
         list-style: none;
         float: left;
         border-radius: 5px;
         width: calc(95% / 3);
         background-color: #fff;
         padding : 0 3% 3% 3%;
     } 

     .product_1, .product_2, .product_3{
         background-color: #ffffff;
     }

     img.product_img {
         width: 90%;
         border-radius: 10px;
         margin: 12% auto 5% auto;
     }

     a {
         color:inherit;
         text-decoration: none;
     }

     .product_name {
         margin: 0 auto 3% auto;
         font-size: 19px;
         font-weight: 600;
         /* line-height: 30px; */
     }

     .product_price_origin {
         margin: 0 auto -1% auto;
         text-decoration: line-through;
         font-size: 15px;
         font-weight: 400;
         color: rgb(144, 144, 144);
     }

     .tax2 {
         font-size: 10px;
         text-decoration: line-through;
     }

     .product_price_sale {
         margin: 0 auto 4% 0;
         font-size: 25px;
         font-weight: 600;
         color: rgb(194, 0, 0);
     }

     .tax {
         font-size: 15px;
     }

     .btn {
         margin-top: 2%;
         color: #fff;
         text-align: center;
         font-size: 15px;
         font-weight: 400;
         background-color: rgb(194, 0, 0);
         border-style: solid;
         border-color:  rgb(194, 0, 0);
         border-width: 2px;
         padding: 4% 9% 4% 14%;
         border-radius: 100px;
     }

     .btn:hover {
         color:  rgb(65, 35, 15);
         background-color: rgba(65, 35, 15, 0);
         border-style: solid;
         border-color:  rgb(65, 35, 15);
         border-width: 2px;
     }

     .brand_btn {
         width: 40%;
         text-align: center;
         margin: 4% auto 5%;
         transition: all 150ms ease-in-out;
     }

     .brand_btn:hover {
         opacity: 70%;
     }



     /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SP ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~　*/


     @media (max-width: 600px) {
         .PC_Only {
             display: none;
             }
             
         .SP_Only {
             display: block;	
             }

         .bgc {
             width: 100%;
             max-width: 750px;
             border-left-style: none;
             border-right-style: none;
             margin:0 auto;
             filter: unset!important;
         }

         main{
            padding: 0!important;
         }

         .main_color {
         /* background-color: #c20000; */
           padding: 0!important;
         }

         /* ============ クーポンエリア ============ */

         .coupon_wrapper {
             margin: 0 2% 5% 2%;
         }

         .coupon_wrapper ul {
             display: flex;
             width: 97%;
             margin: 0 auto 2% auto;
             justify-content: space-between; 
             align-items: center;
             padding-inline-start: unset;
             background-color: #fff;
         }
         
         .coupon_ul li {
             list-style: none;
             border-radius: 3px;
             padding : 3% 4% 3% 4%;
             margin-bottom: 0
         }

         /* ============ 割引商品エリア ============ */

         .product_wrapper ul {
             display: flex;
             margin: 3% auto 0 auto;
             width: 97%;
             height: 100%;
             justify-content: space-between; 
             align-items: center;
             padding-inline-start: unset;
             align-items: stretch;
         }
         
         .product_ul li {
             list-style: none;
             float: left;
             border-radius: 5px;
             width: calc(95% / 3);
             padding : 1% 1% 1% 1%;
         }

         img.product_img {
             border-radius: 5px;
             width: 90%;
             margin-bottom: 0;
         }

         .product_name {
             margin: 1% 0 2%;
             font-size: 9px;
             font-weight: 600;
             line-height: 12px;
             letter-spacing:-0.5px;
         }

         .product_name_long {
             font-size: 8px;
             letter-spacing: -1.5px;
         }

         .product_price_sale {
             font-size: 13px;
             color: rgb(194, 0, 0);
             letter-spacing:-0.5px;
         }

         .tax {
             font-size: 9px;
         }
         
         .product_price_origin {
             margin: 0 auto 0 auto;
             font-size: 9px;
             font-weight: 400;
             color: rgb(144, 144, 144);
             line-height: 12px;
         }

         .tax2 {
             font-size: 8px;
         }

         .btn {
             display: none;
         }

         .product_1, .product_2, .product_3 {
             background-color: #ffffff;
         }

         .brand_btn {
             width: 60%;
             text-align: center;
             margin: 4% auto 5% auto;
         }

       }


         @media (max-width: 799px){
         
             .product_content {
               font-size: 9px;
             }

             .code_box {
             font-size: 40px;
             margin: 0 auto ;
             line-height: 50px;
             }

             .code_caution{
               text-align: left;
               font-size: 9px;
               line-height: 13px;
               margin: -3% auto 0 auto;
             }
         }
         
         @media (max-width: 715px){
                 
             .product_content {
               font-size: 8px;
             }
             
         }
         
         @media (max-width: 636px){
                 
             .product_content {
               font-size: 7.5px;
             }
             
             .product_title {
               width: 93%;
             }
         
             .product ul {
               width: 93%;
             }
         
         }
         
         @media (max-width: 546px){
                 
             .product_content {
               font-size: 7px;
             }
             
         }
         
         @media (max-width: 508px){
                 
             .product_content {
               font-size: 6.5px;
             }
             
         }
         
         @media (max-width: 473px){
                 
             .product_content {
               font-size: 6px;
             }
             
         }
         
         @media (max-width: 436px){
                 
             .product_content {
               font-size: 5.5px;
             }
             
         }
         
         @media (max-width: 400px){
                 
             .product_content {
               font-size: 5px;
             }
             
         }
         
         @media (max-width: 363px){
                 
             .product_content {
               font-size: 4.5px;
             }
             
         }
         
         @media (max-width: 333px){
                 
             .product_content {
               font-size: 4px;
             }
             
         }    
         
         @media (min-width: 800px){
         
             .SP_Only {
                 display: none !important;
             }
         }