@charset "utf-8";

#pageBg { background: url("../_images/bg_dot.png"), url("../_images/bg_line.png") no-repeat center top / 900px, linear-gradient(to bottom, #db4d95, #7c4d95, #dc4d95, #7c4d95, #db4d95); padding-bottom: 10%; }
#pageBg img { width: 100%; vertical-align:top; }

/*intro*/
#pageBg #introSec { text-align: center; padding: 3% 3% 0; margin: 0 auto; }

#pageBg #introSec #topicsArea { position: relative; background: #fff; border-radius: 20px; width: 84%; margin: 12% auto 0; padding-top: 48%; }
#pageBg #introSec #topicsArea #topicsHukidashi { position: absolute; top: -7%; left: 50%; transform: translateX(-50%); width: 110%; }
#pageBg #introSec #topicsArea h2 { width: 35%; margin: 0 auto; }
#pageBg #introSec #topicsArea ul { width: 86%; margin: 0 auto; }
#pageBg #introSec #topicsArea #topicsImg { margin-top: 6%; }
#pageBg #introSec #topicsArea #topicsImg img { border-radius: 0 0 20px 20px; }

#pageBg #introSec #recommendArea { margin-top: 40px; }
#pageBg #introSec #recommendArea #bnInner { width: 70%; margin: 20px auto 0; }

/*plan*/
#pageBg .planSec { width: 90%; margin: 80px auto 0; background: #fff; border-radius: 36px; }
#pageBg .planSec ul li { width: 80%; margin: 0 auto; padding-top: 12%; text-align: center; }
#pageBg .planSec ul li:nth-child(1) { padding-top: 5%; }
#pageBg .planSec ul li:last-child { padding-bottom: 12%; }
#pageBg .planSec ul li a { display: block; }

#pageBg h2 { position: relative; }
#pageBg h2 span { position: absolute; top: -7%; left: 50%; transform: translateX(-50%); width: 15.5%; }
#pageBg #plan2Sec h2::after { position: absolute; bottom: 32%; right: -3%; content: ""; display: block; width: 22%; height: 22%; background: url("../_images/topics2_h_img.png") no-repeat center top/ 100%; }

#pageBg .planSec .placeBtn { color: #fff; border-radius: 50px; font-size: min(3.8vw, 1.5rem); padding: 2% 4%; margin-top: 4%; display: inline-block; }
#pageBg #plan1Sec.planSec .placeBtn { background: #fab4d4; }
#pageBg #plan2Sec.planSec .placeBtn { background: #5ad0ff; }
#pageBg #plan3Sec.planSec .placeBtn { background: #ffbd52; }

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

@media only screen and (max-width:767px) {
    #pageBg { background: url("../_images/bg_dot.png"), url("../_images/bg_line.png") no-repeat center top / 130%, linear-gradient(to bottom, #db4d95, #7c4d95, #dc4d95, #7c4d95, #db4d95); padding-bottom: 10%; }

    /*intro*/
    #pageBg #introSec #recommendArea #bnInner {  margin-top: 10px; }

}