@charset "UTF-8";

/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1440px) {
    
    /*page*/
    .main { width: 94%; }
    .nav li a { font-size: 1.5em; }
    .subnav li a { font-size: 1em; }
    
    .list { min-height: 400px; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1280px) {
    
    /*item*/
    div[class^="name"] { font-size: 1em; }
    div[class^="price"] { font-size: 0.9em; }
    div[class^="sale"] { font-size: 1em; }
    div[class^="sale"] span { font-size: 0.9em; }
    div[class^="sale"] b { font-size: 1.7em; }
    div[class^="sale"] strong { font-size: 0.9em; }
    
    .list-1 h2 { margin: 34px auto; }    
    
}

/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1024px) {    
    
    .container { width: 100%; }
    .topnav-1 li a { font-size: 2.2em; }
    
    .list-1 .title a, .list-2 .title a { width: 80%; }
    
    .list-1 li { width: 31.3333%; margin: 0 1%; }
    .list-1 h2 { margin: 26px auto; }
    
    .press li a { font-size: 1.25em; }
    
    .info-list { width: 46%; }
    .sale-list { width: 15%; }
    .qty { width: 13%; }
    .amount { width: 13%; }
    .btn-del { width: 13%; }
    
    .qty-total { width: 13%; padding: 0 4% 0 2%;}
    .amount-total { width: 26%; padding: 0 13% 0 6%; }
    
    /*page*/
    .main { width: 100%; }
    .nav li a { font-size: 1.3em; }
    .subnav li a { width: 25%; }
    
    .list { min-height: 300px; }
    
    .rule-area { width: 98%; }
    .rule h3 img { width: 100%; }
    
    /*購物車*/
    .cart { width: 85%; }
    .button02 span, .button03 span, .button04 span { font-size: 0.8em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 834px) {
    
    /*item*/
    div[class^="name"] { font-size: 1em; }
    div[class^="price"] { font-size: 0.9em; }
    div[class^="sale"] { font-size: 1em; }
    div[class^="sale"] span { font-size: 0.9em; }
    div[class^="sale"] strong { font-size: 0.9em; }
    div[class^="sale"] b { font-size: 1.7em; }    
    
    .container { padding: 73px 0 20px 0; }
    .main { padding: 73px 0 0 0; }
    .s2 { padding: 30px 2% 20px 2%; }
    .s3 { padding: 0 2% 40px 2%; }
    .s4 { padding: 0 2%; }
    
    .kv-pc { display: none; }
    .kv-m { width: 100%; position: relative; display: block; }
    
    .topnav-1, .topnav-2 { height: 120px; }
    .topnav-1 { padding: 10px 20px; }
    .topnav-1 li a { font-size: 1.7em; }
    .topnav-2 a { padding: 30px 10px; }
    .topnav-2 h2 { font-size: 1.5em; }
    
    .list-1 { width: 100%; margin: 0 auto 25px auto; }
    .list-1 h2 { margin: 0 auto; }
    .list-2 li { width: 31.3333%; margin: 0 1%; }
    .list-2 li:nth-child(4), .list-2 li:nth-child(5), .list-2 li:nth-child(6) { display: none; }
    .list-2 .title a { width: 60%; }
    
    .press li a { width: 23%; font-size: 1.5em; border-radius: 30px; margin: 0 1% 20px 1%; }
    
    .info-list { width: 40%; }
    .sale-list { width: 15%; padding: 0 10px 0 0; }
    .qty { width: 15%; }
    .amount { width: 15%; }
    .btn-del { width: 15%; }
    .amount-total { width: 30%; padding: 0 15% 0 5%; }
    .qty-total { width: 15%; }    
        
    /*page*/
    .pside { width: 50px; right: 5px; }
    .nav ul { padding: 0 0 5px 0; margin: 0 auto; }
    .nav li a { width: 32.3333%; font-size: 1.725em; margin: 0 0.5% 5px 0.5%; }
    .subnav li a { width: 25%; font-size: 1.125em; }
    
    .list { min-height: 600px; }
    .list li { width: 24%; padding: 5px 10px 13px 10px; margin: 0.5%; }
    .photo { width: 100%; height: 170px; }
    .photo img { max-height: 160px; }
    
    /*購物車*/
    .button02 span, .button03 span, .button04 span { font-size: 0.8em; }    
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 736px) {
    
    .topnav-1, .topnav-2 { height: 110px; }
    .topnav-1 { padding: 10px 20px; }
    .topnav-1 li a { font-size: 1.5em; }
    .topnav-2 a { padding: 30px 10px; }
    .topnav-2 h2 { font-size: 1.3em; }
    .topnav-2 p { font-size: 1em; }
    
    .nav li a { font-size: 1.25em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 480px) {
    
    /*item*/
    div[class^="name"] {
	font-size: 1em;
	-webkit-line-clamp: 1; 
	line-height: 1.1em; 
	height: 1em; 
    }
    
    .pside { width: 40px; right: 5px; bottom: 40px; }
    .pside li {	font-size: 1.5em; padding: 5px 0; }
    
    .s2 { padding: 30px 2% 10px 2%; }
    
    .topnav-1 { float: none; width: 100%; height: auto; padding: 10px 20px 15px 20px; }
    .topnav-1 h2 { font-size: 1.5em; }
    .topnav-1 li a { width: 50%; font-size: 1.8em; margin: 0 0 2px 0; }
    .topnav-1 li:nth-child(2) a, .topnav-1 li:nth-child(4) a { border-right: 0px dashed #8c6239; }
    .topnav-2 { float: none; width: 100%; height: auto; padding: 10px; overflow: hidden; }
    .topnav-2 a { padding: 0; }
    .topnav-2 h2 { float: left; width: 60%; font-size: 1.5em; padding: 5px 0 0 0; margin: 0; }
    .topnav-2 p { float: left; width: 40%; font-size: 1.25em; }
    
    .list-1 li, .list-2 li { width: 47%; margin: 0 1.5%; }
    .list-1 li:nth-child(3), .list-2 li:nth-child(3) { display: none; }
    .list-1 h2, .list-2 h2 { width: 250px; height: 250px; line-height: 250px; font-size: 1.5em; margin: 0 auto; }
    
    .press ul { padding: 20px 10px 10px 10px; }
    .press li a { width: 48%; font-size: 1.5em; border-radius: 30px; margin: 0 1% 15px 1%; }
    
    .cart-box h2 { font-size: 1.5em; }
    .cart-box h3 { font-size: 1em; line-height: 120%; }
    .cart-list { padding: 15px 10px; }
    .info-list { float: none; width: 100%; }
    .sale-list { width: 40%; }
    .qty { width: 20%; }
    .amount { width: 20%; }
    .btn-del { width: 20%; padding: 0 10px; }
    
    .qty-total { width: 50%; text-align: left; }
    .amount-total { width: 50%; padding: 0 20% 0 5%; }
    
    /*page*/
    .pside { width: 40px; right: 5px; bottom: 40px; }
    .pside li {	font-size: 1.5em; padding: 5px 0; }
    
    .nav-area { padding: 1.5% 1% 0 1%; }
    .nav-box { height: auto; margin: 0 auto 1% auto; overflow: hidden; }
    .nav { float: left; width: calc(100% - 50px); white-space: nowrap; }
    .nav ul { padding: 0; overflow-x: scroll; overflow-y: hidden; }
    .nav ul::-webkit-scrollbar { display: none; }
    .nav li { width: auto; display: inline-block; margin: 0; }
    .nav li a { width: auto; min-width: 120px; font-size: 1.6em; height: 55px; line-height: 55px; padding: 0 15px;  }
    
    .nav-more, .nav-up { position: relative; float: left; width: 50px; font-size: 1.8em; text-align: center; box-shadow: -5px 0 5px rgba(0,0,0, 0.4); display: block; z-index: 1; }
    .nav-more { height: 55px; line-height: 55px; color: #FFF; background-color: #0070cf; }
    .nav-up { height: 40px; line-height: 40px; color: #999; background-color: #FFF; }
    .icon-down-open-1::before { margin-right: 0; margin-left: 0; }
    .icon-up-open-1::before { margin-right: 0; margin-left: 0; }
    
    .nav-1 { width: 100%; background-color: #FFF; box-shadow: 0 0 5px rgba(0,0,0, 0.4); padding: 0; margin: 0 auto 3% auto;  z-index: 3; }
    .nav-1 h2 { float: left; width: calc(100% - 50px); font-size: 1.2em; height: 40px; line-height: 40px; color: #999; padding: 0 0 0 2.5%; }
    .nav-1 ul { width: 100%; padding: 4% 0; overflow: hidden; }
    .nav-1 li a { float: left; width: 45%; font-size: 1.3em; font-weight: bolder; text-align: center; color: #FFF; background-color: #0070cf; border-radius: 30px; padding: 3% 2%; margin: 0 2.5% 2% 2.5%; }
    .nav-1 li.on a { color: #FFF; background-color: #ED1E79; }
    
    .subnav-box { width: 100%; padding: 0 0.5%; margin: 0 auto; display: block; }
    .subnav { width: 100%; white-space: nowrap; }
    .subnav ul { padding: 0 0 1% 0; overflow-x: scroll; overflow-y: hidden; }
    .subnav ul::-webkit-scrollbar { display: none; }
    .subnav li { width: auto; margin: 0; display: inline-block; }
    .subnav li a { min-width: 80px; width: auto; height: auto; font-size: 1.2em; line-height: 1; border-bottom: 0px solid #EBD4B0; border-right: 0px solid #EBD4B0; padding: 10px; }
    .hide { display: none; }
    
    .path { padding: 2% 2% 1% 2%; }
    .path h2 { font-size: 1.3em; }
    
    .list-area { padding: 0 1% 2% 1%; }
    .list { min-height: 420px; }
    .list h2 { width: 250px; height: 250px; line-height: 250px; font-size: 1.5em; }
    .list li { width: 48%; padding: 0 10px 15px 10px; margin: 1%; }
    .photo { width: 100%; height: 190px; margin: 0; }
    .photo img { max-height: 180px; }
    
    /*頁碼*/
    .page { padding: 20px 1% 40px 1%; }
    .page ul { width: 90%; }
    a.page_prev, a.page_next, a.page_prev_off, a.page_next_off {	font-size: 0.9em; }
    a.page_prev { background-position: 7% center; }
    a.page_next { background-position: 93% center; }
    .page_number { font-size: 1em; }
	
    /*rule*/
    .rule-area { width: 96%; padding: 15px 20px; margin: 0 auto 10px auto; }
    .rule { padding: 20px 10px; }
    
    /*購物車*/
    .button02 span, .button03 span, .button04 span { font-size: 0.9em; }
    
}

/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 430px) {
    
    /*page*/
    .nav li a { min-width: 100px; font-size: 1.5em; padding: 0 10px; }

    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 414px) {
    
    .list-1 .title a, .list-2 .title a { width: 90%; font-size: 1.8em; }
    .list-1 ul, .list-2 ul { padding: 15px 10px; }
    .press li a { font-size: 1.25em; }
    
    .sale-list { width: 30%; text-align: left; padding: 0 10px; }
    .qty { width: 20%; }
    .amount { width: 25%; }
    .btn-del { width: 25%; padding: 0 10px; }
    
    .qty-total { width: 50%; text-align: left; }
    .amount-total { width: 50%; padding: 0 25% 0 5%; }
    
    /*page*/
    .nav li a { font-size: 1.35em; }
    .subnav li a { font-size: 1.125em; }
    .list { min-height: 320px; }

}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 390px) {
    
    .press li a { font-size: 1.2em; padding: 10px 5px; }
    input[type="text"] { width: 55px; }  
    
    /*rule*/
    .rule h2  { font-size: 1.5em; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 375px) {
    
    .nav li a { font-size: 1.3em; }
    .subnav li a { font-size: 1.125em; }
    
}



/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 320px) {
    
    /*item*/
    div[class^="name"] {
	font-size: 0.9em;
	-webkit-line-clamp: 1; 
	line-height: 1.1em; 
	height: 1em; 
    }
    div[class^="price"] { font-size: 0.9em; }
    div[class^="sale"] { font-size: 0.9em; }
    div[class^="sale"] span { font-size: 0.9em; }
    div[class^="sale"] strong { font-size: 0.9em; }
    div[class^="sale"] b { font-size: 1.5em; }
    
    .topnav-1 h2 { font-size: 1.3em; }
    .topnav-2 h2 { font-size: 1.3em; }
    .topnav-2 p { font-size: 1.2em; }
    .list-1 .title a, .list-2 .title a { font-size: 1.5em; }
    .press h2 a { font-size: 1.5em; }
    .press li a { font-size: 1em; }
    
    .cart-box h3  { font-size: 0.9em; }
    .amount { font-size: 0.9em; }
    input[type="text"] { width: 50px; font-size: 0.9em; }
       
    /*page*/
    .nav li a { font-size: 1.2em; }
    .subnav li a { font-size: 1em; }
    .subnav-more, .subnav-up { font-size: 1em; }
    .path li { font-size: 0.9em; }
        
    /*頁碼*/
    a.page_prev, a.page_next, a.page_prev_off, a.page_next_off { font-size: 0.9em; }
    a.page_prev { background-position: 5% center; }
    a.page_next { background-position: 95% center; }
    
}