@charset "utf-8";

#pageBg { background: #fff874; padding-bottom: 10%; overflow: hidden; }
#pageBg img { width: 100%; vertical-align:top; }

/*intro*/
#pageBg #titleSec { text-align: center; padding: 0; margin: 0 auto; }
#pageBg #titleSec #bgArea { background: #fff; }

/*check*/
#pageBg .checkSec { margin: min(5%, 30px) auto 0; }
#pageBg .checkSec .checkNum { position: relative; }
#pageBg .checkSec .checkNum::after { position: absolute; bottom: -40%; left: 50%; z-index: 3; transform: translateX(-50%); margin-left: 47%; content: ""; display: block; width: min(40%, 200px); height: min(150%, 120px); background: url("../_images/img_pen.png") no-repeat center center / contain; }
#pageBg .checkSec .checkNum::before { position: absolute; z-index: 5; content: ""; display: block; top: 130%; right: 0; width: min(200%, 250px); height: min(210%, 270px); }

#pageBg .checkSec .bgArea { position: relative; background: #fff; border: 4px solid #000; width: 90%; margin: 0 auto; padding-bottom: min(10%, 40px); clip-path: polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 30px) 100%,0 100%); }
#pageBg .checkSec .bgArea::after { position: absolute; bottom: -4px; right: -4px; content: ""; display: block; width: 32px; height: 31px; background: url("../_images/page_corner.png") no-repeat center center / contain; }
#pageBg .checkSec .bgArea h2 { position: relative; }

#pageBg .checkSec .bgArea .infoBox { width: 90%; margin: 0 auto; } 

#pageBg .checkSec .bgArea .productBox { width: 90%; margin: 6% auto 0; padding: 6% 0; } 
#pageBg .checkSec .bgArea .productBox { position: relative; background: #fff8d9; border-radius: min(1.5vw, 10px); }
#pageBg .checkSec .bgArea .productBox h3 { position: absolute; left: 0; }

/*check1*/
#pageBg #check1Sec.checkSec { background: url("../_images/intro_bg.png") no-repeat center top / 100%; margin-top: 0; padding-top: min(15vw, 100px); }
#pageBg #check1Sec.checkSec .checkNum::before { background: url("../_images/check1_img.png") no-repeat right bottom / contain; }
#pageBg #check1Sec.checkSec .checkNum::after { bottom: 26%; }

/*check2*/
#pageBg #check2Sec.checkSec .checkNum::before { background: url("../_images/check2_img.png") no-repeat right bottom / contain; }
#pageBg #check2Sec.checkSec .bgArea .productBox h3 { top: -2%; }
#pageBg #check2Sec .btnArea { background: #fff8d9; border-radius: 0 0 min(1.5vw, 10px) min(1.5vw, 10px); width: 90%; margin: 0 auto; padding-bottom: 6%; margin-bottom: min(9vw, 50px); }

/*check3*/
#pageBg #check3Sec.checkSec .bgArea .productBox h3 { top: -1%; }

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

@media only screen and (min-width:768px) {
    
    /*intro*/
    #pageBg #titleSec { max-width: 600px; }
    
    /*check*/
    #pageBg .checkSec { max-width: 600px; }
}