@charset "utf-8";

html { scroll-padding-top: 8.5%; }

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

/*title*/
#pageBg #titleSec { text-align: center; background: url("../_images/title_bg.png") no-repeat #51d0ff bottom center / 110%; width: 100%; }
#pageBg #titleSec h1,
#pageBg #titleSec p { margin: 0 auto; }

/*anc*/
#pageBg #ancSec { padding: min(4vw, 30px) 0 min(.2vw, 5px); }
#pageBg #ancSec h2 { text-align: center; }
#pageBg #ancSec ul { text-align: center; margin: min(1%, 10px) auto 0; width: 100%; }
#pageBg #ancSec ul li { margin: min(1%, 10px) 0; }

/*part*/
#pageBg .partSec h2 { margin: 0 auto; padding-top: 4%; text-align: center; }
#pageBg .partSec h3,
#pageBg .partSec p { margin: min(2%, 5px) auto 0; text-align: center; }
#pageBg .partSec div + h3 { margin-top: min(6%, 30px); }

#pageBg .partSec .contentInner { margin: 0 auto; text-align: center; }
#pageBg .partSec .contentInner > ul { width: 86%; margin: 0 auto; }
#pageBg .partSec .contentInner > ul > li { margin-top: min(6%, 40px); border: 2px solid #000; border-radius: 20px; padding-bottom: min(8%, 40px); }
#pageBg .partSec .contentInner > ul > li:first-child { margin-top: min(2%, 10px); }

#pageBg .partSec .contentInner .detailH { width: 82%; }
#pageBg .partSec .contentInner ul li .detailBtn { width: 35%; }
#pageBg .partSec .contentInner ul.btnList3 { width: 82%; margin: 0 auto; display: flex; justify-content: space-between; }
#pageBg .partSec .contentInner ul.btnList3 li { width: 32%; }
#pageBg .partSec .contentInner ul.btnList2 { width: 82%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; }
#pageBg .partSec .contentInner ul.btnList2 li { width: 48.5%; }
#pageBg .partSec .contentInner ul.btnList2 li:nth-child(n+3) { margin-top: min(3.5%, 13px); }

#pageBg .partSec .atComment { margin-top: min(2.5%, 15px); }

/*part1*/
#pageBg #part1Sec.partSec .contentInner > ul > li { background: linear-gradient(to bottom, #edf9f5 40%, #ffffff 40%); }

/*part2*/
#pageBg #part2Sec.partSec .contentInner > ul > li { background: linear-gradient(to bottom, #d2eff9 35%, #ffffff 35%); }

/*part3*/
#pageBg #part3Sec.partSec .contentInner > ul > li { background: linear-gradient(to bottom, #fff2d3 33%, #ffffff 33%); }
#pageBg #part3Sec.partSec div + h3 { margin-top: min(1.5%, 10px); }

/*shopBtn*/
#shopBtnSec a { width: 70%; display: block; padding: min(12%, 60px) 0 16%; margin: 0 auto; }

@media only screen and (min-width:768px) {
  
    html { scroll-padding-top: 60px; }
    
    /*title*/
    #pageBg #titleSec { background-size: 750px; }
    #pageBg #titleSec h1,
    #pageBg #titleSec p { max-width: 540px; }
    
    /*anc*/
    #pageBg #ancSec h2 img,
    #pageBg #ancSec ul { max-width: 500px; }
    
    /*part*/
    #pageBg .partSec h2 { padding-top: 40px; }
    #pageBg .partSec h2 img,
    #pageBg .partSec h3 img,
    #pageBg .partSec p img { max-width: 540px; }
    #pageBg .partSec .contentInner { max-width: 540px; }

    /*shopBtn*/
    #shopBtnSec a { max-width: 378px; }
  
}