@charset "utf-8";
/* ------------------------------------------------------------ common */
.SP { display: none !important; }

#view.pages	{ background: url(../images/about/fv.jpg) no-repeat center center; background-size: cover; min-width: 1000px; }
#view.pages h2 { padding: 15px 0 90px; }

/* ------------------------------------------------------------ feature */
#feature { padding: 0 0 50px; }
#feature h3 { font-size: 45px; text-align: center; font-weight: bold; margin: 0 auto 20px; }
#feature p { font-size: 18px; line-height: 36px; }
#feature .pink { font-size: 20px; background: url(../images/about/bg_01.jpg) no-repeat center center/cover; border-radius: 100px; -webkit-border-radius: 100px; padding: 15px 30px; margin: 35px auto 0; }
#feature .pink span { position: relative; z-index: 1; }
#feature .pink span::before { position: absolute; content: ""; width: 100%; height: 15px; background: #ffff00; z-index: -1; bottom: 0; }

/* ------------------------------------------------------------ thumb */
.thumb { margin: 35px auto 100px; }
.thumb li { float: left; width: 232px; margin: 0 0 0 24px; }
.thumb li:nth-child(4n+1) { clear: both; margin: 0 auto; }
.thumb li img { width: 100%; height: auto; }

/* ------------------------------------------------------------ download */
#download { padding: 0 0 90px; }
#download h3 { margin: 0 auto 30px; }
#download ul li { float: left; width: calc((100% - 80px) / 5); margin: 0 0 0 20px; text-align: center; }
#download ul li:nth-child(5n+1) { clear: both; margin: 0 auto; }
#download ul li img { width: 100%; height: auto; margin: 0 auto 20px; }
#download ul li p { display: inline-block; *display: inline; *zoom: 1; font-size: 16px; background: #f8e9c9; padding: 2px 20px; border-radius: 10px; -webkit-border-radius: 10px; margin: 0 auto 10px; }
#download ul li h4 { font-size: 24px; line-height: 30px; text-align: center; }

/* ------------------------------------------------------------ rhythmic */
#rhythmic { background: url(../images/about/bg_01.jpg) no-repeat center center/cover; padding: 35px 0 90px; }
#rhythmic h3 { text-align: center; margin: 0 auto 80px; }
/* #rhythmic ul { max-width: 1400px; margin: 0 auto; } */
#rhythmic ul li { float: left; width: calc(100% / 3); }
#rhythmic ul li a { display: block; }
#rhythmic ul li a img { width: 100%; height: auto; }

/* ------------------------------------------------------------ schedule */
#schedule { padding: 50px 0 90px; }
#schedule h3 { text-align: center; margin: 0 auto 15px; }
#schedule h4 { text-align: center; font-size: 30px; }
#schedule dl { margin: 25px auto 0; }
#schedule dl dt { float: left; width: 330px; font-size: 24px; text-align: center; background: url(../images/about/bg_01.jpg) no-repeat center center/cover; border-radius: 100px; -webkit-border-radius: 100px; padding: 5px 0 2px; }
#schedule dl dd { float: right; width: calc(100% - 350px); font-size: 22px; padding: 6px 0 0; }
#schedule ul { margin: 60px auto 0; }
#schedule ul li { float: left; width: 480px; margin: 0 0 0 40px; }
#schedule ul li:nth-child(2n+1) { clear: both; margin: 0 auto; }

/* ------------------------------------------------------------ guidance */
#guidance .titlebox { background: url(../images/about/bg_02.jpg) no-repeat center center/cover; padding: 50px 0 80px; }
#guidance .titlebox h3 { margin: 0 auto 50px; }
#guidance .titlebox h4 { text-align: center; width: 500px; margin: 0 0 20px; }
#guidance .titlebox p { width: 500px; color: #fff; font-size: 18px; line-height: 32px; }
/* #guidance ul { max-width: 1400px; margin: 0 auto; } */
#guidance ul li { float: left; width: calc(100% / 3); }
#guidance ul li img { width: 100%; height: auto; }

/* ------------------------------------------------------------ knowledge */
#knowledge { padding: 100px 0 0; }
#knowledge ul { margin: 30px auto 40px; }
#knowledge ul li { float: left; width: 272px; margin: 0 0 0 92px; }
#knowledge ul li:nth-child(3n+1) { clear: both; margin: 0 auto; }
#knowledge p { font-size: 18px; line-height: 32px; }





/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
/* ------------------------------------------------------------ common */
.PC { display: none !important; }
.SP { display: block !important; }

#view.pages	{ min-width: inherit; }
#view.pages h2 { padding: 20px 0; }
#view.pages h2 img { width: 70%; height: auto; }

/* ------------------------------------------------------------ feature */
#feature { padding: 10px 5% 70px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#feature h3 { font-size: 22px; margin: 0 auto 10px; }
#feature p { font-size: 16px; line-height: 27px; }
#feature .pink { font-size: 14px; line-height: 24px; padding: 15px 30px; margin: 20px auto 0; }
#feature .pink span { background: linear-gradient(transparent 50%, #ffff00 0%); display: inline; padding: 0 2px 4px; }
#feature .pink span::before { display: none; }

/* ------------------------------------------------------------ thumb */
.thumb { width: 90%; margin: 35px auto 70px; }
.thumb li { width: 49%; margin: 0 0 2% 2%; }
.thumb li:nth-child(2n+1) { clear: both; margin: 0 auto; }
.thumb li img { width: 100%; height: auto; }

/* ------------------------------------------------------------ download */
#download { padding: 0 5% 30px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#download h3 { margin: 0 auto 30px; }
#download h3 img { width: 100%; height: auto; }
#download ul li { float: left; width: 47%; margin: 0 0 30px 6%; }
#download ul li:nth-child(2n+1) { clear: both; margin: 0 auto; }
#download ul li img { width: 100%; height: auto; margin: 0 auto 15px; }
#download ul li p { font-size: 12px; padding: 3px 15px 2px; margin: 0 auto 10px; }
#download ul li h4 { font-size: 16px; line-height: 22px; }

/* ------------------------------------------------------------ rhythmic */
#rhythmic { background: url(../images/about/bg_01.jpg) no-repeat center center/cover; padding: 35px 5% 60px; }
#rhythmic h3 { text-align: center; margin: 0 auto 30px; }
#rhythmic h3 img { width: 100%; height: auto; }
#rhythmic ul li { float: none; width: 100%; margin: 0 auto 20px; }

/* ------------------------------------------------------------ schedule */
#schedule { padding: 50px 5% 30px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#schedule h3 { text-align: center; margin: 0 auto 15px; }
#schedule h3 img { width: 100%; height: auto; }
#schedule h4 { font-size: 20px; }
#schedule dl { margin: 25px auto 0; }
#schedule dl dt { float: none; width: 100%; font-size: 16px; padding: 5px 0; margin: 0 auto 5px; }
#schedule dl dd { float: none; width: 100%; font-size: 14px; padding: 6px 0 0; }
#schedule dl:first-of-type dd{ text-align: center; }
#schedule ul { margin: 30px auto 0; }
#schedule ul li { float: none; width: 100%; margin: 0 auto 40px; }
#schedule ul li:nth-child(2n+1) { clear: inherit; margin: 0 auto 40px; }
#schedule ul li img { width: 100%; height: auto; }

/* ------------------------------------------------------------ guidance */
#guidance .titlebox { background: url(../images/about/bg_02_sp.jpg) no-repeat center center/cover; padding: 50px 0 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#guidance .titlebox h3 { width: 90%; margin: 0 auto 30px; }
#guidance .titlebox h3 img { width: 100%; height: auto; }
#guidance .titlebox h4 { text-align: center; width: 90%; margin: 0 auto 20px; }
#guidance .titlebox h4 img { width: 100%; height: auto; }
#guidance .titlebox p { width: 90%; margin: 0 auto; font-size: 16px; line-height: 27px; }
#guidance ul { width: 90%; margin: 30px auto 0; }
#guidance ul li { float: none; width: 100%; margin: 0 auto 20px; }
#guidance ul li img { width: 100%; height: auto; }

/* ------------------------------------------------------------ knowledge */
#knowledge { padding: 70px 0 0; }
#knowledge ul { margin: 40px auto 20px; }
#knowledge ul li { float: none; width: 100%; margin: 0 auto 25px; }
#knowledge ul li:nth-child(3n+1) { clear: inherit; margin: 0 auto 25px; }
#knowledge ul li img { width: 70%; height: auto; }
#knowledge p { width: 90%; margin: 0 auto; font-size: 16px; line-height: 27px; }


}