@charset "UTF-8";

/*--------------------------------------------------------------------
	top
--------------------------------------------------------------------*/

/*introSection*/
#introSection { text-align: center; }
#introSection #logoBox { width: 247px; margin: 6vw auto; }
#introSection > p { font-size: 170%; line-height: 2; }

#introSection #howArea { border-top: 2px dotted #3f8ed2; text-align: left; width: 90%; max-width: 880px; margin: 90px auto 0; padding-top: 60px; }
#introSection #howArea h4 { color: #3f8ed2; font-size: 150%; }
#introSection #howArea p { margin-top: 25px; }

/*lineupSection*/
#lineupSection .lineupInner { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 980px; margin: 60px auto 0; }
#lineupSection .lineupInner:nth-of-type(1) { margin-top: 80px; }
#lineupSection .lineupInner .imgBox { width: 41%; border-radius: 10px; overflow: hidden; }
#lineupSection .lineupInner .infoBox { width: 54.5%; }
#lineupSection .lineupInner .infoBox h4 { width: 310px; }
#lineupSection .lineupInner .infoBox h4 img { margin-bottom: 25px; }
#lineupSection .lineupInner .infoBox h5 { margin-top: 10px; font-weight: bold; font-size: 140%; }
#lineupSection .lineupInner .infoBox p { margin-top: 15px; }

/*linkSection*/
#linkSection ul { display: flex; justify-content: center; margin: 40px 0 100px; }
#linkSection ul li { max-width: 400px; margin: 0 20px; }
#linkSection ul li a { transition: opacity .4s; }

@media screen and (min-width:640px){
    /*linkSection*/
    #linkSection ul li a:hover { opacity: 0.7 }
}

@media screen and (max-width:1000px){
    
    /*introSection*/
    #introSection #logoBox { width: 50%; max-width: 247px; margin: 10vw auto; }
    #introSection > p { text-align: left; width: 90%; margin: 0 auto; font-size: 120%; }
    
    #introSection #howArea { margin: 40px auto 0; padding-top: 30px; }
    #introSection #howArea h4 { color: #3f8ed2; font-size: 120%; }
    #introSection #howArea p { margin-top: 15px; font-size: 110%; }
    
    /*lineupSection*/
    #lineupSection .lineupInner { display: block; margin: 40px auto 0; }
    #lineupSection .lineupInner:nth-of-type(1) { margin-top: 40px; }
    #lineupSection .lineupInner .imgBox { width: 100%; margin-bottom: 20px; }
    #lineupSection .lineupInner .infoBox { width: 100%; }
    #lineupSection .lineupInner .infoBox h4 { width: 70%; max-width: 310px; }
    #lineupSection .lineupInner .infoBox h4 img { margin-bottom: 20px; }
    #lineupSection .lineupInner .infoBox h5 { margin-top: 5px; font-size: 130%; }
    #lineupSection .lineupInner .infoBox p { font-size: 110%; }

    /*linkSection*/
    #linkSection ul { width: 90%; margin: 20px auto 30px;; }
    #linkSection ul li { max-width: 400px; margin: 0 10px; }

}