@media screen and (max-width: 1100px) { 

    body {
        background-size: 180% auto, 150% auto;
    }

    .wrp {
        padding: 0 5% 15vw;
    }

    .banner {
        height: 30vw;
    }

    .main li div {
        height: 15vw;
    }
    
}

@media screen and (max-width: 950px) {

    .pdwrp, .psnwrp {
        width: 90%;
        top: 5%;
        margin-bottom: 5%;
    }

    .popup {
        width: 90%;  
    }

}

@media screen and (max-width: 850px) {

    .kronos-outer .kronos-input {
        width: 135px;
        text-align: right;
        text-indent: 0;
    }

}

@media screen and (max-width: 769px) {

    .wrp {
        padding: 0 5% 30vw;
    }

    .head .member {
        margin-top: 0;
        float: none;
        position: absolute;
        top: 15px;
        right: 0;
    }

    .head .logo {
        width: 140px;
        height: 70px;        
    }

    .head .member div {
        display: none;
    }

    .head .member span {
        margin-right: 0;
        font-size: 14px;
    }

    .head .points {
        float: none;
        margin: 0;
        position: absolute;
        right: 0;
        top: 35px;
        background-color: transparent;
        background-position: 0 12px;
        background-size: 18px auto;
        padding: 0 30px 0 25px;

    }

    .head .points:after {
        right: 0;
    }

    .head .points:hover {
        background-color: transparent;        
    }

    .head .points span {
        font-size: 15px;
        letter-spacing: 0;
    }

    .banner {
        height: 33vw;
        margin-top: 0;
    }    

    .main li {
        width: 47%;
        margin-bottom: 5vw;
        margin-right: 6%;
    }

    .main li:nth-child(4n+4) {
        margin-right: 6%;
    }

    .main li:nth-child(even) {
        margin-right: 0;
    }

    .main li div {
        height: 35vw;
    }

    .main h5, 
    .psnwrp h5 {
        margin: 5vw 0 8vw;
        line-height: 50px;
        background-size: 40px 4px;    
    }

    .main .more {
        margin-top: 5vw;
        width: 100px;
    }

    .pdpic, .pdinfo {
        float: none;
    }

    .pdpic {
        width: 60%;
        min-width: 270px;
        margin: 0 auto 30px;
    }

    .pdpic img {
        width: 100%;
    }

    .pdinfo {
        width: 100%;
    }

    .pdwrp, .psnwrp {
        top: 3%;
        padding: 40px 6%;
    }

    .pdwrp .close, 
    .psnwrp .close {
        top: 10px;
        right: 10px;
    }

    .psnwrp h5 {
        margin-top: 0;
    }

    body {
        background-size: auto 400px, auto 120px;
        background-position: center top, left bottom;
    }

}

@media screen and (max-width: 750px) {
    .pointexpiry div:last-child{
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 700px) {

    div.centr {
        height: auto;
        margin-top: 15px;
        border-radius: 5px;
        text-align: left;
        padding: 4%;   
    }

    div.centr .pfilter span:first-of-type {
        display: block;
        margin-bottom: 10px;
    }

    #kronos-s {
        margin-left: 0;
    }

}

@media screen and (max-width: 620px) {

    .kronos-outer {
        width: 47%;
    }

    .kronos-outer .kronos-input {
        width: 100%;
    }

    div.centr > .pfilter > select:last-of-type {
        margin-left: 0;
        margin-top: 15px;
        width: 180px;
    } 

    .sortbar .pfilter .kronos-outer ~ span {
        margin: 0 1%;
        font-size: 13px;
    }

    .kronos-outer .kronos-input {
        text-align: center;
        text-indent: 20px;
    }

    .pointwrp {
        padding: 5% 5% 8%;        
    }

}



@media screen and (max-width: 600px) {

    .sortbar {
        height: 95px;
        margin-top: 15px;
        border-radius: 5px;
        padding: 15px 5%;
    }

    .sortbar .psort {
        float: none;
        margin-top: 15px;
    }

    .banner .swiper-slide {
        border-radius: 5px;
    }

    .sortbar .psort div {
        margin-left: 0;
    }

    .psnwrp .td {
        display: block;
    }

    .psnwrp .td:first-child {
        padding-bottom: 0;
    }

    .psnwrp .tr:last-child .td:first-child {
        padding: 0;
    }

}

@media screen and (max-width: 550px) {
    .pointexpiry div:last-child span{
        display: block;
        width: 100%;
        margin: 12px 0;
        margin-bottom: 20px;
    }

    .pointexpiry div:last-child.moreinfo{
        max-height:300px;
    }

    .pointexpiry div:last-child{
        max-height: 75px;
    }

    .pointexpiry div:last-child:after{
        top: 27px;
    }
}

@media screen and (max-width: 500px) {

    .banner {
        height: 35vw;
    }

    .main h5, 
    .psnwrp h5 {
        font-size: 5vw;   
    }

    .main .more {
        font-size: 4vw;
    }

    .main li label, 
    .pdpic label {
        width: 10vw;
        height: 11vw;
        background-size: 100% auto;              
    }

    .pdatt {
        margin-top: 40px;
    }

    .pointsrc .td {
        display: block;
        border: none;
        position: relative;
        padding: 10px 0;
        padding-left: 90px;
        line-height: 24px;
    }

    .pointsrc .td:before {
        content: attr(data-th)"　　";
        color: #888;
        position: absolute;
        top: 10px;
        left: 0;
    }

    .pointwrp div.tr div:first-child  {
        width: 100%;
        padding-left: 90px;
    }

    .pointwrp div.tr div:last-child {
        width: 100%;
        padding-left: 90px;
        text-align: left;
    }

    .pointwrp div.tr:first-child {
        display: none;
    }

    .pointwrp div.tr:hover:not(:first-child) {
        background: none;
    }

    .pointsrc .tr {
        display: block;
        border-bottom: 1px solid #e8e8e8;
        padding: 10px 0;
    }

    .centr .pfilter > div:first-of-type .kronos-viewer {
        left: 0;
    }

    .centr .pfilter > div:last-of-type .kronos-viewer {
        right: 0;
    }    

    .member span {
        width: 90px;
        display: inline-block;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }

}

@media screen and (max-width: 450px) {

    .amount {
        text-align: center;
    }

    .amount button {
        display: block;
        float: none;
        margin: 20px auto 0;
    }

    .pdpic {
        width: 100%;
        min-width: auto;
        margin-bottom: 20px;
    }

    .psnwrp .address select {
        margin-left: 10px;
    }

    .psnwrp .table .pst {
        width: 50px;
    }
    .main li label {
        font-size: 10px;
    }

    .direction {
        bottom: 0;
    }
}

@media screen and (max-width: 340px) {

    .kronos-outer {
        width: 46%;
    }

    .kronos-outer .kronos-input {
        font-size: 12px;
    }

}