/* クーポン共通CSS
************************/


#coupon-info {
	margin: 1rem 0;
	line-height: 1.8;
}

#coupon-info .coupon {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    width: 500px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    background:#eeeeee;
    padding:10px;
}

#coupon-info .price {
    font-size: 26px;
    font-weight: bold;
    color: #444444;
    text-align: center;
    line-height: 1.4;
    padding: 0 .5rem .5rem;	
}

#coupon-info .price span.price-underline {
    background:linear-gradient(transparent 60%, #ff6 60%);	
}

#coupon-info .price span.price-txt {
    font-size: 38px;
    letter-spacing: -1px;	
}

#coupon-info .codeArea {
    background:#ffffff;
    margin:10px 0 0;
    padding:12px;
}

#coupon-info .code {
    font-size: 46px;
    line-height: 1;
    font-weight: bold;
    color: #333333;
    text-align: center;
}

#coupon-info .date {
    font-size: 14px;
    line-height: 1;
    padding:10px 0 0;
    font-weight: bold;
    text-align: center;
}

#coupon-info .coupon-info-txt {
    text-align: center;
    padding: .7rem 100px 0;	
}
#coupon-info .coupon-info-txt p {
    font-size: 15px;
    /*font-weight: bold;*/
}



@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    
    #coupon-info .coupon-info {
        margin: .8rem auto;
        line-height: 1.38;
    }
    
    #coupon-info .coupon {
        width:80%
    }
    
    #coupon-info .price {
        font-size: 4.6vw;
    }
    
    #coupon-info .price span.price-txt {
        font-size: 7.6vw;
    }
    
    #coupon-info .code {
        font-size: 7.8vw;
    }
    
    #coupon-info .date {
       font-size: 2.67vw; 
    }
    
    #coupon-info .coupon-info-txt {
        padding: .7rem 0 0;
    }
    
    #coupon-info .coupon-info-txt p {
        font-size: 3.47vw;
    }
}


/*--PCSP_表示・非表示切り替え-----------------------------------*/

@media screen and (min-width: 481px) {
    #coupon-info .sp {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    #coupon-info .pc {
        display: none;
    }

}