@charset "utf-8";

/* common */

.flex { text-align: left; font-size: 73%;}
.sp{ display: block;}
.pc{ display: none;}

h1,
h2,
h3{ font-size: 100%;}

h2 {
    padding: 8px 0;
    border-top: 1px solid #cbcbcb;
    border-bottom: 1px solid #cbcbcb;
    color: #595757;
    text-align: left;
    line-height: 1;
}

.note {
    margin: 0 0 20px;
    padding: 15px;
    border: 1px solid;
    color: #f00;
}

.more{ margin: 4% 0 0; text-align: right;}
.more a{ position: relative; display: inline-block; padding: 0 18px 0 0;}
.more a:before{ position: absolute; top: 50%; right: 6px; margin: -3px 0 0; width: 6px; height: 6px; border-bottom: 1px solid; border-left: 1px solid; content: ""; transform: rotate(-135deg);}
.more a:after{ position: absolute; top: 50%; right: 0; margin: -3px 0 0; width: 6px; height: 6px; border-bottom: 1px solid; border-left: 1px solid; content: ""; transform: rotate(-135deg);}


.bn ul li{ margin: 4% 0 0;}
.bn img { width: 100%;}
.bn a:hover img{ opacity: .65;}

.news { margin: 8% 0 0;}
.news .ttl { position: relative;}
.news .btn { position: absolute; top: 5px; right: 0; display: inline-block; padding: 4px 8px; background: #e3e3e5; color: #f00; font-weight: bold; font-size: 75%; line-height: 1;}
.news .btn:hover { opacity: .65;}
.news ul li{ margin: 4% 0 0;}
.news ul a{ display: block;}
.news .cat{ line-height: 1;}
.news .cat span{ display: inline-block; box-sizing: border-box; padding: 4px 8px; background: #999; color: #fff; font-weight: bold; font-size: 75%;}
.news ul a:hover .cat span{ opacity: .65;}
.news time{ display: inline-block; margin: 0 0 0 8px;}
.news h3{ margin: 5px 0 0; font-weight: normal;}

.product h2 { margin: 8% 0 0;}
.product ul { margin: 0; font-size: 0;}
.product ul li { display: inline-block; box-sizing: border-box; margin: 8% 0 0; padding: 0 4%; width: 50%; vertical-align: top; font-size: 12px;}
.product a { display: block;}
.product ul img { max-width: 100%;}

.shop { margin: 8% 0 0;}
.shop ul li{ margin: 4% 0 0;}

/*520-759px*/
@media only screen and (min-width: 520px) {
    .product ul li { width: calc(100% / 3);}
}


/*760-1039px*/
@media only screen and (min-width: 760px) {
    .more{ margin: 3% 0 0;}
    
    .bn{ padding: 1.5% 0 0;}
    .bn ul{ margin: 0 -1.5%; text-align: left; font-size: 0;}
    .bn ul li{ display: inline-block; box-sizing: border-box; margin: 1.5% 0 0; padding: 0 1.5%; width: 50%; font-size: 12px;}

    .news { margin: 6% 0 0;}
    .news ul li{ margin: 3% 0 0;}

    .product h2 { margin: 6% 0 0;}
    .product ul { margin: 0 -1.5%;}
    .product ul li { margin: 3% 0 0; padding: 0 1.5%; width: 25%;}

    .shop { margin: 6% 0 0;}
    .shop ul li{ margin: 3% 0 0;}
}


/*900-1039px*/

@media only screen and (min-width: 900px) {
    .pc{ display: block;}
    .sp{ display: none;}
    
    .flex { display: flex; width: 100%; -js-display: flex; justify-content: space-between;}
    .flex + .flex{ margin: 40px auto 0}
    
    .flex .cont{ box-sizing: border-box; padding: 0 10px 0 0; width: 70%;}
    .flex .cont + .cont{ padding: 0 0 0 10px; width: 30%;}
    
    .row:after{ display: block; clear: both; content: "";}
    .row{ margin: 20px 0 0;}
    .row-left{ float: left; box-sizing: border-box; width: calc(100% / 6 * 5);}
    .row-right{ float: right; box-sizing: border-box; padding: 0 0 0 1.6%; width: calc(100% / 6);}
    
    .more{ margin: 10px 0 0;}
    
    .bn { padding: 10px 0 0;}
    .bn ul{ margin: 0;}
    .bn ul li{ display: block; margin: 10px 0 0; padding: 0; width: 100%;}

    .news { margin: 0;}
    .news ul li{ margin: 20px 0 0;}
    
    .bn + .news{ margin: 20px 0 0;}

    .product h2 { margin: 0;}
    .product ul { margin: 0 -5px;}
    .product ul li { margin: 10px 0 0; padding: 0 5px; width: calc(100% / 6);}
    
    .more + h2{ margin: 20px 0 0;}
    
    .row-left ul li{ width: 20%;}
    .row-right ul li{ width: 100%;}

    .shop { margin: 0;}
    .shop ul li{ margin: 10px 0 0;}
    
    .shop + .bn{ margin: 20px 0 0;}
}


/*1040px---*/

@media only screen and (min-width: 1040px) {
    .note { text-align: center;}
    
    .flex{ margin: 0 auto; width: 1008px;}
    .flex .cont{ padding: 0 43px 0 0; width: 743px;}
    .flex .cont + .cont{ padding: 0; width: 265px;}
    
    .more{ margin: 15px 0 0;}

    .bn{ padding: 20px 0 0;}
    .news ul li{ margin: 15px 0 0;}

    .product ul { margin: 0 -7px;}
    .product ul li { margin: 15px 0 0; padding: 0 7px;}
    .product figure{ overflow: hidden; width: 100%; height: 100%;}
    .product a img{ -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
    .product a:hover img{ -webkit-transform: scale(1.15); transform: scale(1.15);}

    .shop { margin: 0;}
    .shop ul li{ margin: 10px 0 0;}
    
    .shop + .bn{ margin: 30px 0 0;}
}