/* line 4, ../scss/style.scss */
html {
width: 100%; }
/* line 8, ../scss/style.scss */
body {
width: 100%;
background: #000;
-webkit-text-size-adjust: auto; }
/* line 12, ../scss/style.scss */
body .wrapper {
width: 100%; }
@media screen and (max-width: 767px) {
/* line 12, ../scss/style.scss */
body .wrapper {
overflow: hidden; } }
/* line 17, ../scss/style.scss */
body .wrapper .header {
width: 100%;
background: #fff; }
@media screen and (max-width: 767px) {
/* line 17, ../scss/style.scss */
body .wrapper .header {
box-sizing: border-box;
padding: 0 10px; } }
/* line 24, ../scss/style.scss */
body .wrapper .header .header-contents {
max-width: 1000px;
margin: 0 auto;
padding: 11px 0 13px; }
@media screen and (max-width: 767px) {
/* line 24, ../scss/style.scss */
body .wrapper .header .header-contents {
width: 100%;
padding: 6px 0 7px; } }
/* line 32, ../scss/style.scss */
body .wrapper .header .header-contents h1 {
float: left; }
@media screen and (max-width: 767px) {
/* line 32, ../scss/style.scss */
body .wrapper .header .header-contents h1 {
width: 83px; } }
/* line 38, ../scss/style.scss */
body .wrapper .header .header-contents .logo {
float: right;
padding: 6px 0 3px; }
@media screen and (max-width: 767px) {
/* line 38, ../scss/style.scss */
body .wrapper .header .header-contents .logo {
width: 56px;
padding: 2px 0 1px; } }
/* line 48, ../scss/style.scss */
body .wrapper .main {
width: 100%;
border-top: 4px solid #828282; }
@media screen and (max-width: 767px) {
/* line 48, ../scss/style.scss */
body .wrapper .main {
border-top: 2px solid #828282; } }
/* line 54, ../scss/style.scss */
body .wrapper .main h2 {
max-width: 1200px;
margin: 0 auto; }
@media screen and (max-width: 767px) {
/* line 54, ../scss/style.scss */
body .wrapper .main h2 {
display: none; } }
/* line 61, ../scss/style.scss */
body .wrapper .main .main_sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 61, ../scss/style.scss */
body .wrapper .main .main_sp {
display: block;
text-align: center; } }
/* line 68, ../scss/style.scss */
body .wrapper .main .how-to-apply {
width: 1000px;
color: #fff;
font-size: 20px;
margin: 0 auto;
padding-bottom: 44px; }
@media screen and (max-width: 767px) {
/* line 68, ../scss/style.scss */
body .wrapper .main .how-to-apply {
max-width: 640px;
font-size: 10px;
font-weight: bold;
padding: 0 10px 19px;
margin: 0 auto; } }
/* line 81, ../scss/style.scss */
body .wrapper .main .how-to-apply dt {
width: 142px;
border: 4px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
box-sizing: border-box;
float: left;
margin-right: 20px;
padding: 10px 0;
text-align: center; }
@media screen and (max-width: 767px) {
/* line 81, ../scss/style.scss */
body .wrapper .main .how-to-apply dt {
width: 71px;
border: 2px solid #fff;
padding: 5px 0;
margin-right: 6px; } }
/* line 97, ../scss/style.scss */
body .wrapper .main .how-to-apply dd {
float: left;
padding-top: 13px; }
/* line 100, ../scss/style.scss */
body .wrapper .main .how-to-apply dd br {
display: none; }
@media screen and (max-width: 767px) {
/* line 97, ../scss/style.scss */
body .wrapper .main .how-to-apply dd {
width: 215px;
padding-top: 4px; }
/* line 106, ../scss/style.scss */
body .wrapper .main .how-to-apply dd br {
display: block; } }
/* line 113, ../scss/style.scss */
body .wrapper .contents {
width: 100%;
background: #000;
margin: 0 auto; }
/* line 117, ../scss/style.scss */
body .wrapper .contents.challenge-area {
width: 1000px; }
@media screen and (max-width: 767px) {
/* line 117, ../scss/style.scss */
body .wrapper .contents.challenge-area {
width: 100%; } }
/* line 123, ../scss/style.scss */
body .wrapper .contents .girl-guitar-bg {
width: 100%;
background: #fff; }
/* line 126, ../scss/style.scss */
body .wrapper .contents .girl-guitar-bg .girl-guitar {
max-width: 1600px;
margin: 0 auto; }
@media screen and (max-width: 767px) {
/* line 126, ../scss/style.scss */
body .wrapper .contents .girl-guitar-bg .girl-guitar {
display: none; } }
/* line 133, ../scss/style.scss */
body .wrapper .contents .girl-guitar-bg .girl-guitar-sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 133, ../scss/style.scss */
body .wrapper .contents .girl-guitar-bg .girl-guitar-sp {
display: block;
text-align: center; } }
/* line 141, ../scss/style.scss */
body .wrapper .contents .guitar-play {
width: 100%;
background: url(../../variax-challenge-g/img/variax_bg.jpg) repeat top; }
@media screen and (max-width: 767px) {
/* line 141, ../scss/style.scss */
body .wrapper .contents .guitar-play {
background: none;
background-color: #fff; } }
/* line 148, ../scss/style.scss */
body .wrapper .contents .guitar-play ul {
max-width: 1600px;
position: relative;
margin: 0 auto; }
@media screen and (max-width: 767px) {
/* line 148, ../scss/style.scss */
body .wrapper .contents .guitar-play ul {
max-width: 640px; } }
/* line 155, ../scss/style.scss */
body .wrapper .contents .guitar-play ul li {
font-size: 16px; }
/* line 158, ../scss/style.scss */
body .wrapper .contents .guitar-play ul .play-photo {
display: block; }
@media screen and (max-width: 767px) {
/* line 158, ../scss/style.scss */
body .wrapper .contents .guitar-play ul .play-photo {
display: none; } }
/* line 164, ../scss/style.scss */
body .wrapper .contents .guitar-play ul .play-photo-sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 164, ../scss/style.scss */
body .wrapper .contents .guitar-play ul .play-photo-sp {
display: block;
text-align: center; } }
/* line 171, ../scss/style.scss */
body .wrapper .contents .guitar-play ul .guitar-play-txt {
color: #272727;
position: absolute;
top: 94%;
left: 50%;
margin-left: -31%; }
@media screen and (max-width: 767px) {
/* line 171, ../scss/style.scss */
body .wrapper .contents .guitar-play ul .guitar-play-txt {
font-size: 7px;
left: 4.5%;
margin-left: 0; } }
/* line 185, ../scss/style.scss */
body .wrapper .contents .detail-area {
width: 100%;
background: url(../../variax-challenge-g/img/bg.jpg) repeat left top #fff; }
/* line 188, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 {
width: 1120px;
box-sizing: border-box;
margin: 0 auto;
padding: 60px 0 80px 60px; }
@media screen and (max-width: 767px) {
/* line 188, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 {
width: 100%;
padding: 30px 10px; } }
/* line 197, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 ul {
padding-top: 43px;
float: left; }
@media screen and (max-width: 767px) {
/* line 197, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 ul {
float: none;
padding: 0; } }
/* line 204, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 ul li {
width: 567px;
color: #333;
font-size: 18px;
padding: 0 0 40px 0;
line-height: 1.8; }
/* line 210, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 ul li.area1-txt {
padding-left: 10px;
letter-spacing: -1px;
text-align: justify;
text-justify: inter-ideograph; }
/* line 216, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 ul li.ttl1 {
background: url(../../variax-challenge-g/img/ttl01.png) no-repeat center;
color: #ff6363;
font-size: 34px;
font-weight: bold;
text-align: center;
margin-left: -28px;
line-height: 1; }
@media screen and (max-width: 767px) {
/* line 216, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 ul li.ttl1 {
width: 270px;
background: url(../../variax-challenge-g/img/ttl01_sp.png) no-repeat center;
background-size: 100%;
text-indent: -9999px;
margin: 0 auto 18px;
padding: 0; } }
@media screen and (max-width: 767px) {
/* line 204, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 ul li {
width: 100%;
box-sizing: border-box;
padding: 0 25px 15px;
text-align: center; }
/* line 238, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 ul li.area1-txt {
font-size: 11px;
padding: 0;
text-align: left;
letter-spacing: 0; } }
/* line 247, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 p {
float: left; }
@media screen and (max-width: 767px) {
/* line 247, ../scss/style.scss */
body .wrapper .contents .detail-area .area1 p {
float: none;
box-sizing: border-box;
padding: 5px 15px 0 40px;
text-align: center; } }
@media screen and (max-width: 767px) {
/* line 257, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 {
padding: 0 10px; } }
/* line 261, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 p {
background: url(../../variax-challenge-g/img/ttl02.png) no-repeat center bottom;
color: #6395ff;
font-size: 34px;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
line-height: 1; }
@media screen and (max-width: 767px) {
/* line 261, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 p {
width: 180px;
background: url(../../variax-challenge-g/img/ttl02_sp.png) no-repeat center;
background-size: 100%;
text-indent: -9999px;
margin: 0 auto;
padding: 10px 0; } }
/* line 278, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 ul {
width: 1200px;
margin: 20px auto 0; }
@media screen and (max-width: 767px) {
/* line 278, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 ul {
width: 100%; } }
/* line 284, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 ul li {
color: #333;
float: right;
font-size: 18px;
line-height: 1.8; }
@media screen and (max-width: 767px) {
/* line 284, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 ul li {
float: none; } }
/* line 292, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 ul li.guitar-girl {
float: left; }
@media screen and (max-width: 767px) {
/* line 292, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 ul li.guitar-girl {
float: none;
text-align: center; } }
/* line 299, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 ul li.area2-txt {
width: 560px;
margin-right: 100px;
text-align: justify;
text-justify: inter-ideograph; }
@media screen and (max-width: 767px) {
/* line 299, ../scss/style.scss */
body .wrapper .contents .detail-area .area2 ul li.area2-txt {
width: 100%;
font-size: 11px;
margin-right: 0; } }
/* line 313, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 {
width: 1010px;
margin: 110px auto 120px; }
@media screen and (max-width: 767px) {
/* line 313, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 {
width: 100%;
box-sizing: border-box;
margin: 30px 0 33px;
padding: 0 10px; } }
/* line 322, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 ul {
float: left; }
@media screen and (max-width: 767px) {
/* line 322, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 ul {
float: none; } }
/* line 327, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 ul li {
color: #333;
font-size: 18px;
padding-bottom: 30px;
line-height: 1.7; }
@media screen and (max-width: 767px) {
/* line 327, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 ul li {
font-size: 11px; } }
/* line 335, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 ul li.area3-txt {
width: 595px;
padding: 0 30px 0 10px;
text-align: justify;
text-justify: inter-ideograph; }
@media screen and (max-width: 767px) {
/* line 335, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 ul li.area3-txt {
width: 100%;
padding: 0; } }
/* line 345, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 ul li.ttl3 {
max-width: 240px;
background: url(../../variax-challenge-g/img/ttl03.png) no-repeat center bottom;
color: #ff6363;
font-size: 34px;
font-weight: bold;
text-align: center;
padding: 0 10px 10px;
margin-bottom: 30px;
line-height: 1; }
@media screen and (max-width: 767px) {
/* line 345, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 ul li.ttl3 {
width: 138px;
background: url(../../variax-challenge-g/img/ttl03_sp.png) no-repeat center;
background-size: 100%;
text-indent: -9999px;
margin: 0 auto 18px;
padding: 0; } }
/* line 366, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 .turning1 {
display: block;
float: left; }
@media screen and (max-width: 767px) {
/* line 366, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 .turning1 {
display: none; } }
/* line 373, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 .turning1-sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 373, ../scss/style.scss */
body .wrapper .contents .detail-area .area3 .turning1-sp {
display: block;
text-align: center;
padding-top: 20px; } }
/* line 382, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 {
width: 1010px;
margin: 0 auto; }
@media screen and (max-width: 767px) {
/* line 382, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 {
width: 100%;
box-sizing: border-box;
padding: 0 10px; } }
/* line 390, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 ul {
float: left; }
@media screen and (max-width: 767px) {
/* line 390, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 ul {
float: none; } }
/* line 395, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 ul li {
color: #333;
font-size: 18px;
padding-bottom: 30px;
line-height: 1.7;
letter-spacing: -1px; }
@media screen and (max-width: 767px) {
/* line 395, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 ul li {
font-size: 11px; } }
/* line 404, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 ul li.area4-txt {
width: 595px;
padding: 0 30px 0 10px;
text-align: justify;
text-justify: inter-ideograph; }
@media screen and (max-width: 767px) {
/* line 404, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 ul li.area4-txt {
width: 100%;
padding: 0; } }
/* line 414, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 ul li.ttl4 {
background: url(../../variax-challenge-g/img/ttl04.png) no-repeat center bottom;
color: #6395ff;
font-size: 34px;
font-weight: bold;
text-align: center;
padding: 0 0 10px;
margin: 0 0 30px -90px;
line-height: 1; }
@media screen and (max-width: 767px) {
/* line 414, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 ul li.ttl4 {
width: 285px;
background: url(../../variax-challenge-g/img/ttl04_sp.png) no-repeat center;
background-size: 100%;
text-indent: -9999px;
margin: 0 auto 15px;
padding: 0; } }
/* line 434, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 .turning2 {
float: left; }
@media screen and (max-width: 767px) {
/* line 434, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 .turning2 {
display: none; } }
/* line 440, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 .turning2-sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 440, ../scss/style.scss */
body .wrapper .contents .detail-area .area4 .turning2-sp {
display: block;
text-align: center;
padding-top: 20px; } }
/* line 449, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 {
width: 1010px;
margin: 110px auto; }
@media screen and (max-width: 767px) {
/* line 449, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 {
width: 100%;
box-sizing: border-box;
margin: 34px auto 33px;
padding: 0 10px; } }
/* line 459, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li {
float: left; }
/* line 461, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li.area5-txt {
width: 585px;
color: #333;
font-size: 18px;
padding: 30px 0 0 35px;
line-height: 1.75;
text-align: justify;
text-justify: inter-ideograph; }
@media screen and (max-width: 767px) {
/* line 461, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li.area5-txt {
width: 100%;
padding: 0;
font-size: 11px; } }
/* line 475, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li.acoustic-sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 475, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li.acoustic-sp {
width: 135px;
display: block;
margin: 0 auto 15px;
position: relative; }
/* line 482, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li.acoustic-sp::after {
width: 67px;
height: 74px;
background: url(../../variax-challenge-g/img/acoustic-deco.png) no-repeat right center;
background-size: 100%;
content: '';
display: block;
position: absolute;
top: -10px;
left: 140px; } }
/* line 495, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li.acoustic-girl {
display: none; }
@media screen and (max-width: 767px) {
/* line 495, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li.acoustic-girl {
display: block;
text-align: center;
padding-top: 20px; } }
@media screen and (max-width: 767px) {
/* line 459, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li {
float: none; }
/* line 505, ../scss/style.scss */
body .wrapper .contents .detail-area .area5 ul li.acoustic {
display: none; } }
/* line 512, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 {
width: 1200px;
margin: 0 auto; }
@media screen and (max-width: 767px) {
/* line 512, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 {
width: 100%;
box-sizing: border-box;
padding: 0 10px; } }
/* line 520, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 p {
background: url(../../variax-challenge-g/img/ttl05.png) no-repeat center bottom;
color: #6395ff;
font-size: 34px;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
line-height: 1; }
@media screen and (max-width: 767px) {
/* line 520, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 p {
width: 266px;
background: url(../../variax-challenge-g/img/ttl05_sp.png) no-repeat center;
background-size: 100%;
text-indent: -9999px;
margin: 0 auto;
padding-top: 10px; } }
/* line 537, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul {
padding-top: 40px; }
@media screen and (max-width: 767px) {
/* line 537, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul {
padding-top: 15px; } }
/* line 542, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul li {
color: #333;
font-size: 18px;
float: right;
line-height: 1.7; }
@media screen and (max-width: 767px) {
/* line 542, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul li {
float: none;
font-size: 11px; } }
/* line 551, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul li.turning3 {
float: left; }
@media screen and (max-width: 767px) {
/* line 551, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul li.turning3 {
float: none;
text-align: center; } }
/* line 558, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul li.area6-txt {
width: 585px;
box-sizing: border-box;
margin-right: 100px;
text-align: justify;
text-justify: inter-ideograph; }
/* line 564, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul li.area6-txt span {
font-size: 14px; }
@media screen and (max-width: 767px) {
/* line 558, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul li.area6-txt {
width: 100%;
padding-bottom: 20px;
margin-right: 0; }
/* line 571, ../scss/style.scss */
body .wrapper .contents .detail-area .area6 ul li.area6-txt span {
font-size: 9px; } }
/* line 579, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 {
width: 1250px;
margin: 90px auto 130px; }
@media screen and (max-width: 767px) {
/* line 579, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 {
width: 100%;
box-sizing: border-box;
margin: 33px auto;
padding: 0 10px; } }
/* line 588, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 p {
background: url(../../variax-challenge-g/img/ttl06.png) no-repeat center bottom;
color: #ff6363;
font-size: 34px;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
line-height: 1; }
@media screen and (max-width: 767px) {
/* line 588, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 p {
width: 205px;
background: url(../../variax-challenge-g/img/ttl06_sp.png) no-repeat center;
background-size: 100%;
text-indent: -9999px;
margin: 0 auto;
padding-top: 10px; } }
/* line 605, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul {
padding-top: 30px; }
@media screen and (max-width: 767px) {
/* line 605, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul {
padding-top: 15px; } }
/* line 610, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul li {
color: #333;
font-size: 18px;
float: left;
line-height: 1.7; }
@media screen and (max-width: 767px) {
/* line 610, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul li {
float: none;
font-size: 11px; } }
/* line 619, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul li.area7-txt {
width: 585px;
box-sizing: border-box;
padding-right: 40px;
margin-left: 100px;
text-align: justify;
text-justify: inter-ideograph; }
@media screen and (max-width: 767px) {
/* line 619, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul li.area7-txt {
width: 100%;
padding: 0 0 20px;
margin-left: 0; } }
/* line 632, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul li.interview {
display: block; }
@media screen and (max-width: 767px) {
/* line 632, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul li.interview {
display: none; } }
/* line 638, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul li.interview-sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 638, ../scss/style.scss */
body .wrapper .contents .detail-area .area7 ul li.interview-sp {
display: block;
text-align: center; } }
/* line 648, ../scss/style.scss */
body .wrapper .contents .detail-area .area8 {
width: 868px;
margin: 0 auto; }
@media screen and (max-width: 767px) {
/* line 648, ../scss/style.scss */
body .wrapper .contents .detail-area .area8 {
width: 100%;
box-sizing: border-box;
padding: 0 10px; } }
/* line 657, ../scss/style.scss */
body .wrapper .contents .detail-area .area8 ul li {
padding-bottom: 35px;
text-align: center; }
@media screen and (max-width: 767px) {
/* line 657, ../scss/style.scss */
body .wrapper .contents .detail-area .area8 ul li {
padding-bottom: 33px; } }
/* line 663, ../scss/style.scss */
body .wrapper .contents .detail-area .area8 ul li.ttl7 {
background: url(../../variax-challenge-g/img/ttl07.png) no-repeat center bottom;
color: #6395ff;
font-size: 34px;
font-weight: bold;
text-align: center;
padding: 0 0 10px;
margin: 0 0 30px -50px;
line-height: 1; }
/* line 672, ../scss/style.scss */
body .wrapper .contents .detail-area .area8 ul li.ttl7 span {
font-size: 27px; }
@media screen and (max-width: 767px) {
/* line 663, ../scss/style.scss */
body .wrapper .contents .detail-area .area8 ul li.ttl7 {
width: 223px;
background: url(../../variax-challenge-g/img/ttl07_sp.png) no-repeat center;
background-size: 100%;
text-indent: -9999px;
margin: 0 auto 18px;
padding-top: 10px; } }
/* line 687, ../scss/style.scss */
body .wrapper .contents .detail-area .area9 {
width: 874px;
margin: 75px auto 0;
padding-bottom: 110px; }
@media screen and (max-width: 767px) {
/* line 687, ../scss/style.scss */
body .wrapper .contents .detail-area .area9 {
width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 0 10px; } }
/* line 698, ../scss/style.scss */
body .wrapper .contents .detail-area .area9 ul li {
padding-bottom: 35px;
text-align: center; }
@media screen and (max-width: 767px) {
/* line 698, ../scss/style.scss */
body .wrapper .contents .detail-area .area9 ul li {
padding-bottom: 33px; } }
/* line 704, ../scss/style.scss */
body .wrapper .contents .detail-area .area9 ul li.ttl8 {
background: url(../../variax-challenge-g/img/ttl08.png) no-repeat center bottom;
color: #ff6363;
font-size: 34px;
font-weight: bold;
text-align: center;
padding: 0 0 10px;
margin: 0 0 30px -50px;
line-height: 1; }
/* line 713, ../scss/style.scss */
body .wrapper .contents .detail-area .area9 ul li.ttl8 span {
font-size: 27px; }
@media screen and (max-width: 767px) {
/* line 704, ../scss/style.scss */
body .wrapper .contents .detail-area .area9 ul li.ttl8 {
width: 223px;
background: url(../../variax-challenge-g/img/ttl08_sp.png) no-repeat center;
background-size: 100%;
text-indent: -9999px;
margin: 0 auto 18px;
padding-top: 10px; } }
@media screen and (max-width: 767px) {
/* line 729, ../scss/style.scss */
body .wrapper .contents .challenge {
padding: 0 10px; } }
/* line 733, ../scss/style.scss */
body .wrapper .contents .challenge .apply-point {
color: #fff66c;
font-size: 28px;
font-weight: bold;
text-align: center;
padding: 55px 0 21px; }
@media screen and (max-width: 767px) {
/* line 733, ../scss/style.scss */
body .wrapper .contents .challenge .apply-point {
font-size: 14px;
padding: 27px 0 10px; } }
/* line 744, ../scss/style.scss */
body .wrapper .contents .challenge .apply-detail {
border-top: 2px solid #5ab52f;
border-bottom: 2px solid #5ab52f;
color: #fff66c;
padding: 40px 0 15px; }
@media screen and (max-width: 767px) {
/* line 744, ../scss/style.scss */
body .wrapper .contents .challenge .apply-detail {
padding: 16px 0 20px; } }
/* line 752, ../scss/style.scss */
body .wrapper .contents .challenge .apply-detail li {
font-size: 22px;
font-weight: bold;
padding-bottom: 17px; }
@media screen and (max-width: 767px) {
/* line 752, ../scss/style.scss */
body .wrapper .contents .challenge .apply-detail li {
font-size: 11px;
line-height: 1.9;
padding-bottom: 0; }
/* line 760, ../scss/style.scss */
body .wrapper .contents .challenge .apply-detail li span {
display: block;
margin-left: 5em; } }
/* line 765, ../scss/style.scss */
body .wrapper .contents .challenge .apply-detail li.caution {
font-size: 16px; }
@media screen and (max-width: 767px) {
/* line 765, ../scss/style.scss */
body .wrapper .contents .challenge .apply-detail li.caution {
font-size: 9px;
letter-spacing: -1px; }
/* line 770, ../scss/style.scss */
body .wrapper .contents .challenge .apply-detail li.caution .caution-span {
margin-left: 7em; } }
/* line 777, ../scss/style.scss */
body .wrapper .contents .challenge .challenge-txt {
width: 810px;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 1.6;
margin: 42px auto 58px; }
@media screen and (max-width: 767px) {
/* line 777, ../scss/style.scss */
body .wrapper .contents .challenge .challenge-txt {
width: 100%;
font-size: 11px;
margin: 18px auto 22px; } }
/* line 790, ../scss/style.scss */
body .wrapper .contents .challenge .listen {
text-align: center;
padding-left: 30px; }
@media screen and (max-width: 767px) {
/* line 790, ../scss/style.scss */
body .wrapper .contents .challenge .listen {
padding-left: 0; } }
/* line 796, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar {
display: inline-block; }
@media screen and (max-width: 767px) {
/* line 796, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar {
width: 26%; } }
@media screen and (max-width: 767px) {
/* line 801, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar.lespaul {
width: 22%; } }
/* line 806, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar.martin {
margin: 0 67px 0 134px; }
@media screen and (max-width: 767px) {
/* line 806, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar.martin {
width: 26%;
margin: 0 23px 0 31px; } }
@media screen and (max-width: 767px) {
/* line 813, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar.backer {
width: 24%; } }
/* line 818, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar li {
color: #fff;
font-size: 18px;
font-weight: bold;
margin-bottom: 18px;
text-align: center; }
@media screen and (max-width: 767px) {
/* line 818, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar li {
font-size: 9px;
letter-spacing: -1px; }
/* line 827, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar li span {
display: block;
margin-left: -1em; } }
/* line 832, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar li br {
display: none; }
@media screen and (max-width: 767px) {
/* line 832, ../scss/style.scss */
body .wrapper .contents .challenge .listen .listen-guitar li br {
display: block; } }
/* line 841, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn {
position: relative;
margin: 39px 0 56px; }
@media screen and (max-width: 767px) {
/* line 841, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn {
text-align: center;
margin: 6px 0 21px; } }
/* line 848, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li {
float: left; }
@media screen and (max-width: 767px) {
/* line 848, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li {
float: none; } }
/* line 853, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li a {
cursor: pointer; }
/* line 856, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.a-btn {
display: block; }
@media screen and (max-width: 767px) {
/* line 856, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.a-btn {
display: none; } }
/* line 862, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.b-btn {
display: block;
margin: 0 20px 0; }
@media screen and (max-width: 767px) {
/* line 862, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.b-btn {
display: none; } }
/* line 869, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.c-btn {
display: block; }
@media screen and (max-width: 767px) {
/* line 869, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.c-btn {
display: none; } }
/* line 875, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.a-btn_sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 875, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.a-btn_sp {
width: 31.4%;
background: url(../../variax-challenge-v/img/a-btn_sp_off.png) no-repeat center top;
background-size: 100%;
display: inline-block; }
/* line 882, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.a-btn_sp a {
display: block;
padding-bottom: 48%; } }
/* line 888, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.b-btn_sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 888, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.b-btn_sp {
width: 31.4%;
background: url(../../variax-challenge-v/img/b-btn_sp_off.png) no-repeat center top;
background-size: 100%;
display: inline-block;
margin: 0 1%; }
/* line 896, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.b-btn_sp a {
display: block;
padding-bottom: 48%; } }
/* line 902, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.c-btn_sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 902, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.c-btn_sp {
width: 31.4%;
background: url(../../variax-challenge-v/img/c-btn_sp_off.png) no-repeat center top;
background-size: 100%;
display: inline-block; }
/* line 909, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn li.c-btn_sp a {
display: block;
padding-bottom: 48%; } }
@media screen and (max-width: 767px) {
/* line 916, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container {
width: 31% !important;
top: -35px; } }
@media screen and (max-width: 767px) and (min-width: 601px) and (max-width: 766px) {
/* line 916, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container {
top: -70px; } }
@media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 600px) {
/* line 916, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container {
top: -45px; } }
@media screen and (max-width: 767px) {
/* line 926, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container button {
height: 200%;
padding: 0; } }
@media screen and (max-width: 767px) and (max-width: 767px) {
/* line 926, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container button {
background-size: 22%;
background-position: 95% 300%; } }
@media screen and (max-width: 767px) and (min-width: 601px) and (max-width: 766px) {
/* line 926, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container button {
height: 310%; } }
@media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 600px) {
/* line 926, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container button {
height: 240%; } }
@media screen and (max-width: 767px) and (max-width: 767px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 94% 63% !important; } }
@media screen and (max-width: 767px) and (min-width: 280px) and (max-width: 342px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 94% 76% !important; } }
@media screen and (max-width: 767px) and (min-width: 343px) and (max-width: 370px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 93.2% 71% !important; } }
@media screen and (max-width: 767px) and (min-width: 371px) and (max-width: 401px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 93.5% 65.5% !important; } }
@media screen and (max-width: 767px) and (min-width: 402px) and (max-width: 406px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 94% 61% !important; } }
@media screen and (max-width: 767px) and (min-width: 407px) and (max-width: 429px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 92% 61% !important; } }
@media screen and (max-width: 767px) and (min-width: 430px) and (max-width: 444px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 92% 57% !important; } }
@media screen and (max-width: 767px) and (min-width: 445px) and (max-width: 479px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 92% 49% !important; } }
@media screen and (max-width: 767px) and (min-width: 480px) and (max-width: 520px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 92% 52% !important; } }
@media screen and (max-width: 767px) and (min-width: 521px) and (max-width: 560px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 92% 42% !important; } }
@media screen and (max-width: 767px) and (min-width: 561px) and (max-width: 600px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 93.5% 32% !important; } }
@media screen and (max-width: 767px) and (min-width: 601px) and (max-width: 640px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 93% 63% !important; } }
@media screen and (max-width: 767px) and (min-width: 641px) and (max-width: 720px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 94% 55% !important; } }
@media screen and (max-width: 767px) and (min-width: 721px) and (max-width: 766px) {
/* line 940, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-container .mejs-controls .mejs-pause button {
background-position: 94% 45% !important; } }
/* line 986, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-time {
display: none; }
/* line 989, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-time-rail {
display: none; }
/* line 992, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-duration {
display: none; }
/* line 995, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-mute {
display: none; }
/* line 998, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn .mejs-horizontal-volume-slider {
display: none; }
/* line 1001, ../scss/style.scss */
body .wrapper .contents .challenge .listen-btn #mep_1 {
margin: 0 1.3%; }
/* line 1005, ../scss/style.scss */
body .wrapper .contents .challenge .answer {
margin-bottom: 20px; }
@media screen and (max-width: 767px) {
/* line 1005, ../scss/style.scss */
body .wrapper .contents .challenge .answer {
margin-bottom: 10px; } }
/* line 1010, ../scss/style.scss */
body .wrapper .contents .challenge .answer li {
width: 860px;
background: url(../../variax-challenge-v/img/bg-answer02.jpg) repeat center;
box-sizing: border-box;
color: #323232;
font-size: 20px;
float: left;
line-height: 1.4;
padding: 8px 0 7px 21px;
vertical-align: middle; }
@media screen and (max-width: 767px) {
/* line 1010, ../scss/style.scss */
body .wrapper .contents .challenge .answer li {
width: 80.7%;
height: 50px;
font-size: 10px;
padding: 4px 0 4px 7px; } }
/* line 1026, ../scss/style.scss */
body .wrapper .contents .challenge .answer li.answer-number {
width: 140px;
background: url(../../variax-challenge-v/img/bg-answer01.jpg) no-repeat center;
color: #fff;
font-size: 30px;
font-weight: bold;
padding: 35px 0 34px;
line-height: 1;
text-align: center; }
@media screen and (max-width: 767px) {
/* line 1026, ../scss/style.scss */
body .wrapper .contents .challenge .answer li.answer-number {
width: 19.3%;
font-size: 14px;
padding: 18px 0; } }
/* line 1043, ../scss/style.scss */
body .wrapper .contents .challenge .apply-btn {
padding: 62px 0 80px;
text-align: center; }
@media screen and (max-width: 767px) {
/* line 1043, ../scss/style.scss */
body .wrapper .contents .challenge .apply-btn {
padding: 27px 15px 37px; } }
/* line 1050, ../scss/style.scss */
body .wrapper .contents .challenge .attention-point {
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center; }
@media screen and (max-width: 767px) {
/* line 1050, ../scss/style.scss */
body .wrapper .contents .challenge .attention-point {
font-size: 12px; } }
/* line 1059, ../scss/style.scss */
body .wrapper .contents .challenge .attention-detail {
border-top: 2px solid #5ab52f;
border-bottom: 2px solid #5ab52f;
margin: 22px 0 80px;
padding: 38px 0 10px; }
@media screen and (max-width: 767px) {
/* line 1059, ../scss/style.scss */
body .wrapper .contents .challenge .attention-detail {
margin: 10px 0 0;
padding: 18px 0 5px; } }
/* line 1068, ../scss/style.scss */
body .wrapper .contents .challenge .attention-detail li {
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
padding-bottom: 25px;
margin-left: 1em;
text-indent: -1em; }
@media screen and (max-width: 767px) {
/* line 1068, ../scss/style.scss */
body .wrapper .contents .challenge .attention-detail li {
font-size: 10px;
padding-bottom: 15px; } }
/* line 1083, ../scss/style.scss */
body .wrapper .contents .sns {
font-size: 0;
text-align: center;
padding-bottom: 80px; }
@media screen and (max-width: 767px) {
/* line 1083, ../scss/style.scss */
body .wrapper .contents .sns {
padding: 30px 0 25px; } }
/* line 1090, ../scss/style.scss */
body .wrapper .contents .sns li {
display: inline-block; }
@media screen and (max-width: 767px) {
/* line 1090, ../scss/style.scss */
body .wrapper .contents .sns li {
width: 45px; } }
/* line 1095, ../scss/style.scss */
body .wrapper .contents .sns li.twitter {
margin: 0 38px; }
/* line 1101, ../scss/style.scss */
body .wrapper .challenge-ttl {
text-align: center; }
@media screen and (max-width: 767px) {
/* line 1101, ../scss/style.scss */
body .wrapper .challenge-ttl {
display: none; } }
/* line 1107, ../scss/style.scss */
body .wrapper .challenge-ttl_sp {
display: none; }
@media screen and (max-width: 767px) {
/* line 1107, ../scss/style.scss */
body .wrapper .challenge-ttl_sp {
display: block; } }
/* line 1113, ../scss/style.scss */
body .wrapper .footer {
width: 100%;
background: #828282; }
/* line 1116, ../scss/style.scss */
body .wrapper .footer p {
font-size: 12px;
text-align: center;
padding: 28px 0; }
@media screen and (max-width: 767px) {
/* line 1116, ../scss/style.scss */
body .wrapper .footer p {
font-size: 6px;
padding: 14px 0 15px; } }