@charset "utf-8";

#pageBg { background: #fff; }
#pageBg img { width: 100%; vertical-align:top; }

/*title*/
#pageBg #titleSec { text-align: center; background: url("../_images/title_bg.png") no-repeat bottom center / 100% #ff9600; width: 100%; padding-bottom: min(2vw, 15px); }
#pageBg #titleSec h1 { margin: 0 auto; }

/*anc*/
#pageBg #ancSec { background: url("../_images/category1_h_bg.png") no-repeat #ffd08d bottom center / 100%; padding: min(4vw, 30px) 0 min(25vw, 150px); }
#pageBg #ancSec h2 { background: #ffff8e; text-align: center; }
#pageBg #ancSec ul { text-align: center; margin: min(4%, 30px) auto 0; width: 86%; }
#pageBg #ancSec ul li { margin: min(5%, 40px) 0; }

/*category*/
#pageBg .categorySec h2,
#pageBg .categorySec .contentInner { margin: min(5%, 40px) auto 0; text-align: center; }
#pageBg .categorySec h2 { margin-top: -27%; }
#pageBg .categorySec h2 img { max-width: 540px; }

#pageBg .categorySec ul { width: 86%; margin: 0 auto; }
#pageBg .categorySec ul li { margin-top: min(6%, 40px); border: 2px solid #000; border-radius: 20px; background: url("../_images/category_product_bg.png") #fff repeat-x top center / 100%; }

/*category1*/
#pageBg #category1Sec.categorySec { background: url("../_images/category2_h_bg.png") no-repeat bottom center / 100%; padding: min(4vw, 30px) 0 min(30vw, 160px); scroll-margin-top: 45vw; }

/*category2*/
#pageBg #category2Sec.categorySec { background: url("../_images/category3_h_bg.png") no-repeat #fffacd bottom center / 100%; padding: min(4vw, 30px) 0 min(28vw, 180px); scroll-margin-top: 43vw; }

/*category3*/
#pageBg #category3Sec.categorySec { scroll-margin-top: 23vw; }
#pageBg #category3Sec.categorySec h2 { margin-top: -19%; }

/*shopBtn*/
#shopBtnSec { max-width: 100%; width: 100%; padding: 14% 0 16%; margin: min(8vw,40px) auto 0; background: #fffacd; }
#shopBtnSec a { width: 70%; max-width: 378px; display: block; margin: 0 auto; }

@media only screen and (min-width:768px) {
    
    /*title*/
    #pageBg #titleSec h1 { max-width: 540px; }
    
    /*anc*/
    #pageBg #ancSec { background-size: 600px; }
    #pageBg #ancSec h2 img,
    #pageBg #ancSec ul { max-width: 500px; }
    
    /*category*/
    #pageBg .categorySec .contentInner { max-width: 540px; }
    #pageBg .categorySec h2 { margin-top: -160px; }
  
    /*category1*/
    #pageBg #category1Sec.categorySec { background-size: 600px; scroll-margin-top: 230px;  }

    /*category2*/
    #pageBg #category2Sec.categorySec { background-size: 600px; scroll-margin-top: 230px;  }
  
    /*category3*/
    #pageBg #category3Sec.categorySec { scroll-margin-top: 100px;  }
    #pageBg #category3Sec.categorySec h2 { margin-top: -120px;  }

}