@charset "utf-8";

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

/*title*/
#pageBg #titleSec { text-align: center; background: #bcedfe; width: 100%; }
#pageBg #titleSec h1 { margin: 0 auto; }

/*anc*/
#pageBg #ancSec { text-align: center; margin: min(16%, 100px) auto 0; width: 86%; position: relative; background: #fffde2; border: 4px solid #2370d8; border-radius: 20px; padding: min(5%,35px) min(5%,35px) min(8%,50px); box-sizing: border-box; }
#pageBg #ancSec #indexHukidashi { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); }

/*oteire*/
#pageBg .oteireSec h2,
#pageBg .oteireSec .contentInner { margin: 0 auto; text-align: center; }
#pageBg .oteireSec ul { width: 86%; margin: 0 auto; }
#pageBg .oteireSec ul li { padding-bottom: 15%; }

/*oteire1*/
#pageBg #oteire1Sec .bgArea { background: #e1f7ff; }

/*oteire2*/
#pageBg #oteire2Sec .bgArea { background: #fff0c8; }

/*oteire3*/
#pageBg #oteire3Sec .bgArea { background: #eedffa; }

/*oteire4*/
#pageBg #oteire4Sec .bgArea { background: #ffe9ec; }

/*oteire5*/
#pageBg #oteire5Sec .bgArea { background: #e8f1ed; }

/*oteire6*/
#pageBg #oteire6Sec .bgArea { background: #d7e1fa; }

/*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) {
    
    /*title*/
    #pageBg #titleSec h1 { max-width: 600px; }
    
    /*anc*/
    #pageBg #ancSec { max-width: 500px; }
    
    /*oteire*/
    #pageBg .oteireSec h2 { max-width: 600px; }
    #pageBg .oteireSec .contentInner { max-width: 600px; box-shadow: 0px 0px 300px 0px rgba(255, 255, 255, 1); }
}