@charset "utf-8";

#pageBg { background: url("../_images/bg_line.gif") center top; padding-bottom: 30px; }
#pageBg img { width: 100%; vertical-align:top; }

/*btn*/
#pageBg .btn1 { background: #fff693; position: relative; color: #000; display: block; width: 80%; max-width: 220px; padding: 15px 0; text-align: center; margin: 10% auto;  border-radius: 50px; font-weight: 500; }
#pageBg .btn2 { background: #fff; border: 2px solid #e60012; position: relative; color: #e60012; display: block; width: 80%; max-width: 220px; padding: 20px 0; margin: 10% auto; text-align: center; border-radius: 50px; font-weight: 500; }
#pageBg .btn1::after,
#pageBg .btn2::after { position: absolute; content: "▶"; right: 5px; top: 50%; transform: translateY(-50%); }

/*intro*/
#pageBg #introSec { background: url("../_images/mv_bg1.png") no-repeat center bottom / cover; width: 100%; }
#pageBg #introSec #introArea { text-align: center; margin: 0 auto; }
#pageBg #introSec #introArea #mvArea { background: url("../_images/mv_bg2.png") no-repeat center top / 100%; }

/*how*/
#pageBg #howSec h2 { margin-top: 4%; }

#pageBg #howSec #howArea { width: 80%; background: #9ee6ff; border: 4px solid #fff; border-radius: 20px; margin: 4% auto 0; padding: 5% 3%; text-align: center; box-sizing: border-box; }
#pageBg #howSec #howArea h3 { color: #fff; padding: 4px; font-size: 100%; font-weight: 500; }
#pageBg #howSec #howArea h3#how1 { background: #189bfb; }
#pageBg #howSec #howArea h3#how2 { background: #ffaeda; margin-top: 10%; }
#pageBg #howSec #howArea h4 { background: #fff; font-size: 90%; padding: 4px; display: inline-block; margin: 10% 0 0; font-weight: 500; }
#pageBg #howSec #howArea p { margin-top: 3%; font-weight: 500; }
#pageBg #howSec #howArea p span.colorRed { color: #e60012; }
#pageBg #howSec #howArea p.cap { font-size: 80%; margin-top: 1%; }
#pageBg #howSec #howArea div { margin-top: 4%; }

/*info*/
#pageBg #infoSec { background: #fff; text-align: center; padding: 1% 8% 8%; }
#pageBg #infoSec h2 { font-size: 100%; border: 1px solid #000; padding: 4px; text-align: center; margin-top: 10%; font-weight: 500; }
#pageBg #infoSec p { margin-top: 2%; }

#pageBg #infoSec #qualificationArea p { font-weight: 500; font-size: 94%; }

#pageBg #infoSec #periodArea ul { text-align: center; }
#pageBg #infoSec #periodArea ul li { display: inline-block; text-align: center; margin-top: 5%; font-size: 90%; }
#pageBg #infoSec #periodArea ul li h3 { font-size: 100%; text-align: center; border-bottom: 1px solid #000; padding-bottom: 2%; font-weight: 500; }
#pageBg #infoSec #periodArea ul li p { font-weight: 500; letter-spacing: -0.05em; }

#pageBg #noteArea p { font-size: 86%; text-align: left; }

@media only screen and (min-width:768px) {
    
    /*intro*/
    #pageBg #introSec #introArea { max-width: 600px; padding-top: 40px; }
    
    /*info*/
    #pageBg #howSec,
    #pageBg #infoSec .area { max-width: 600px; margin: 0 auto; }
    
    #pageBg #infoSec #periodArea ul li { margin-left: 100px; margin-right: 100px; }
}