* { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: sans-serif; padding: 1%; }
   
    .rapper{width : 1300px;margin:0 auto;margin-bottom: 300px;}

    div.productDisplayArea{display: none;}
    div.endOfCampaign{
        display: none;
        justify-content: center;
        border: 5px double #aaa;
        padding: 100px 0 100px 0;
    }
    div.nowLoading{
        display:flex;
        justify-content: center;
    }
    div.head-logo a {
        float: left;
        display: block;
        margin: 0;
        width: 227px;
    }
    .MainBanner Img { width : 100%;}

    div#CampaignName {
        display: flex;
        justify-content: center;
        font-size: xxx-large;
        text-shadow: 1px 1px 7px darkred;
        font-style: oblique;
        font-weight: 800;
    }
    div#CampaignDescription {
        display: block;
        text-align: center;
        font-size: larger;
    }
    div#CampaignPeriod {
        display: block;
        text-align: center;
        font-size: x-large;
    }

    .title{display:flex;}
    .categoryFilters { display: flex; gap: 8px; flex-wrap: wrap; margin:1rem auto  1rem auto; justify-content: center; }
    .categoryButton{ padding: 6px 16px; border-radius: 20px; border: 1px solid #ccc; background: transparent; color: #666; font-size: 13px; cursor: pointer; }
    .categoryButton.active { background: #e8f0fe; color: #1a73e8; border-color: transparent; }

    .grid { display: grid; grid-template-columns: repeat(5, 19.6%); gap: 20px 0.5%; }
    .grid a{ color: #000;  text-decoration: none; justify-content: center;}

    .card { background: #fff; border: 1px solid #e0e0e0; border-radius:12px; padding:2%; width:100%;  height:570px; position:relative;}


    .cImage{ display: flex; justify-content: center; aspect-ratio: 1/1;}
    .cImage img{position:relative;width:100%;height:100%;object-fit:contain; border:0;}
    .txtField{padding:0.5rem 1rem;}

    .cPropatys{display: flex; gap:10px; margin:5px 0 5px 0;flex-wrap: wrap; height: 4.1rem; overflow: hidden;}
    .cPropaty{ flex-shrink: 0; white-space: nowrap; font-size: 0.7rem; background-color: #bbb; border-radius: 12px; padding:5px; height: 1.7rem; border:1px; border-color: #888;}

    .cPlice{text-align: right; line-height: 2.2rem;}
    .cSpecialPrice{ color:red; font-size:xx-large;}
    .specialPriceDisplay{ color:black; background-color: yellow; padding: 0 5px;}
    .taxes,
    .cSalesFormat,
    .cUserflag{font-size:small;}
    .cUserflag{ text-align: center;}

    .cMaker{font-size:small; color:#666;}
    .cModelName{font-size: large; height:80px;overflow: hidden;}
    .cCurrentPrice{display :flex; justify-content: flex-end;align-items: baseline;font-size:small;text-decoration-line:line-through;}
    .cCurrentPrice::before{ content: "通常価格"; margin-right:0.5rem; font-size:small;}

    .climit{color:black;font-size: small; text-align: center;}
    .limitedQuantity{color:red;font-size: xx-large; text-align: center;font-weight: bold;}

    .grid div:hover{ border-color:#4da6ff; }
    .grid div:hover .cModelName{color: #4da6ff; cursor:pointer;}

    .soldout{ position: absolute;inset: 0; border-radius:12px; background-color: rgba(0, 0, 0, 0.2); z-index:100; display:none; justify-content: center;}
    .soldout.active{display:flex;}
    .soldout img{width:auto; height: auto; ; max-width: 85px; max-height: 172px;  margin:30px;  transform: rotate(25deg);}

    .pageNum{ width:100%; display:flex;justify-content: center;}

    div#gPagination {
        display: flex;
        justify-content: center;
        font-size: large;
        gap: 1rem;
        margin-top: 40px;
    }
    .cPn,.pPn,.pBttom{
        text-decoration: none;
        text-align: center;
        color: initial;
        padding-top: 5px;
    }
    .cPn:hover,.pPn:hover,.pBttom:hover{color:lightblue;}
    .cPn{width: 1.5rem; height:2rem;}
    .pPn{width: 4rem;}
    .cPn.active {pointer-events: none;color: black;border-bottom: 3px solid blue;}

    .bottomHr{
        border-top: 3px double #aaa;
        margin:1rem;
    }

    .pageBottom {display: flex;justify-content: right;}


    @media screen and (max-width:1300px){
        .rapper{width : 100%;margin:0 auto;margin-bottom: 300px;}
        .grid { display: grid; grid-template-columns: repeat(4, 24%);column-gap:0.66%;row-gap: 20px;  }
        .card { height:580px;}
    }

    @media screen and (max-width:1000px){
        .rapper{width : 100%;margin:0 auto;margin-bottom: 300px;}
        div#CampaignName { font-size: 40px;  }
        div#CampaignDescription { font-size: medium; }
        .grid { display: grid; grid-template-columns: repeat(3, 32%);column-gap:1%;row-gap: 20px; }
        .card { height: 630px;;}
    }
    @media screen and (max-width:800px){
        .rapper{width : 100%;margin:0 auto;margin-bottom: 300px;}
        div#CampaignName { font-size: 30px;  }
        div#CampaignDescription { font-size: small; }
        .grid { display: grid; grid-template-columns: repeat(2, 48.5%); column-gap:1%;row-gap: 20px; }
        .card { height:660px;}
    }
    @media screen and (max-width:600px){
        .rapper{width : 100%;margin:0 auto;margin-bottom: 300px;}
        div#CampaignName { font-size: 20px;  }
        div#CampaignDescription { font-size: x-small; }
        .grid { display: grid; grid-template-columns: repeat(1, 100%); column-gap:0;row-gap: 30px;}
        .card { height:auto;}
        .cModelName { font-size: x-large; height: 110px;}
        .specialPriceDisplay { font-size: large; }
    }
    @media screen and (max-width:460px){
        .rapper{width : 100%;margin:0 auto;margin-bottom: 300px;}
        div#CampaignName { font-size: 18px;  }
        div#CampaignDescription { font-size: 7px; }
        div#CampaignPeriod { font-size: medium; }
        .grid { display: grid; grid-template-columns: repeat(1, 100%); column-gap:0;row-gap: 30px;}
        .card { height:auto;}
        .cModelName { font-size: x-large; height: 110px;}
        .specialPriceDisplay { font-size: large; }
    }
    @media screen and (max-width:360px){
        .rapper{width : 100%;margin:0 auto;margin-bottom: 300px;}
        div#CampaignName { font-size: 15px;  }
        div#CampaignDescription { font-size: 6px; }
        div#CampaignPeriod { font-size: medium; }
        .grid { display: grid; grid-template-columns: repeat(1, 100%); column-gap:0;row-gap: 30px;}
        .card { height:auto;}
        .cModelName { font-size: x-large; height: 110px;}
        .specialPriceDisplay { font-size: large; }
    }