body{
    font-size: 14px ;
}


.pcNone{
    display: none ;
}
.spNone{
    display: block ;
}

img {
    width: 100% ;
}

body{
    font-family: 'YuGothic','游ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック', arial, helvetica, sans-serif;
}


.all    {
    width: 1280px  ;
    margin: 0 auto ;
}

.top    {
    width: 1280px  ;
    margin: 0px  auto 150px ;
    display: flex  ;  
}

.text{
    margin-top: 150px;
}

.topimg1 ,.topimg2 {
    width: calc(100% / 3) ;
}


.logo   {
    width: 300px  ;
    margin: 0px auto 30px ;
}

h1.text   {
    display: block ;
    text-align: center ;
    margin-bottom: 150px ;
    line-height: 1.5 ;
    font-weight: normal;
    font-size: 16px;
}

.block  {
    width: 960px ;
    display: flex ;
    justify-content:space-between ;
    margin: 50px auto 10px ;
}

.bagimg {
    width: 460px ;
    margin-bottom: 10px ;
}

.bagtext    {
    line-height: 1.5 ;
    overflow: hidden ;
}
.bagtext span{
    background: #000 ;
    color: #fff ;
    padding: 1px 5px ;
    font-size: 12px ;
    float: right;
    transform:translateY(-100%);
}
.block a{
    text-decoration: none ;
    color: black ;
    text-align: left ;
}

.ciaopanic  {
    width: 180px;
    margin: 100px auto 50px;
}

.copy   {
    text-align: center;
    font-size: 10px;
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {  
    body{
        font-size: 10px ;
    }
   .pcNone{
        display: block ;
    }
    .spNone{
        display: none ;
    }
    .all    {
        width: 100% ;
    }

    .top    {
        width: 100% ;
        margin:0px auto 100px ;

    }

    .header{
        margin-bottom: 50px;
    }

 

    h1.text{
        font-size: 12px;
        margin-bottom:50px ;
    }

  

    .topimg1    {
        width: 50% ;
    }

    .logo   {
        width: 33% ;
    }

    .text   {
        width: 90% ;
        margin: 0 auto 100px ;
        font-size: 12px     ;
    }

    .block  {
        width: 100% ;
        display: flex ;
        justify-content:space-between ;  
        font-size: 10px ;
        margin-bottom:10px ;
    }

    .bagimg {
        width: 100% ;
        
        padding: 10px ;
        box-sizing: border-box ;
        justify-content:space-around ;
        margin-bottom: 5px;
       
    }

    .bagtext{
    
        text-align: center;
    }

    .bagtext span{
        background: #000 ;
        color: #fff ;
        padding: 1px 5px ;
        
        float: none ;
        margin-left: 5px;
        font-size: 10px;
        
    }

    .ciaopanic  {
        width: 30%;
        
    }

  
}
div.color{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
}
div.beige{
    background: #e2d9c1;
}
div.khaki{
    background: #5e7d00;
}