@charset "UTF-8";
@media screen and (min-width: 768px),print {  /* 3枚表示のbxslider
-------------------------------------*/

.sp{ display: none; }
.logo{ position: fixed; top: 10px; left: 10px; z-index: 10000; }


#main-img{ background: url(../images/index/main-back.jpg) top center no-repeat; height: 690px; }
#main-img .inner-box{ width: 1200px; margin: 0 auto; position: relative; height: 690px; }
#main-img .ch01{ position: absolute; top: 130px; left: 180px; }
#main-img .ch02{ position: absolute; top: 210px; left: 320px; }
#main-img .ch03{ position: absolute; top: 420px; left: 378px; }
#main-img h1{ position: absolute; top: 330px; left: 370px; }
#main-img .icon{ position: absolute; bottom: 85px; right: 30px; z-index: 100000; text-align: center; cursor: pointer;}
#main-img .icon img { width: 250px;}
#main-img .attention{ position: absolute; bottom: 30px; right: 30px; z-index: 100000; width: 250px; text-align: center;}
#main-img .attention img{ width: 90%;}
#main-img .sc-icon{ position: absolute; top: 583px; left: 572px; }


#start-box{ width: 100%; background: url(../images/index/main-back02.jpg) top center no-repeat; height: 780px; opacity:1; position: absolute;}
#start-box .inner-box{ width: 1200px; margin: 0 auto; position: relative; height: 780px; }
#start-box .inner-box #stopwatchStart{ cursor:pointer; position: absolute; bottom: 100px; left: 180px; }
#start-box .inner-box #input{ width: 600px; text-align: center; padding: 10px; font-size: 40px; position: absolute; top: 360px; left: 300px; }

#main-contentsq {opacity:0; display: none; background:#f1f1ec; width: 100%; min-width: 1200px; position: relative; padding: 0 0 20px 0; }

#main-contentsq #concept-box{background: url(../images/index/main-back03.jpg) no-repeat top center; width: 100%;  }
#main-contentsq #concept-box .inner-box{ width: 1200px; margin: 0 auto; position: relative; height: 690px;  }
#main-contentsq #concept-box .inner-box .ch01{ position: absolute; top: 280px; left: 145px; }
#main-contentsq #concept-box .inner-box .wing01{ position: absolute; top: -40px; left: 350px; }
#main-contentsq #concept-box .inner-box .wing02{ position: absolute; bottom: -30px; right: 195px; }

#q06{ position: relative; z-index: 5; }
#q11{ position: relative; z-index: 5; }
#q12{ position: relative; z-index: 5; }
#q13{ position: relative; z-index: 5; }
.inner-box3{ width: 1200px; margin: 0 auto; position: relative; }
.inner-box3 figure.tt01{ opacity: 0; position: absolute; top: -120px; right: 120px; z-index: 6; }
.inner-box3 figure.tt02{ opacity: 0; position: absolute; top: -200px; left: 60px; z-index: 1; }
.inner-box3 figure.tt03{ opacity: 0; position: absolute; top: -200px; right: 120px; z-index: 1; }
.inner-box3 figure.tt04{ opacity: 0; position: absolute; top: -100px; left: 80px; z-index: 1; }
.inner-box3 figure.tt05{ position: absolute; top: -200px; left: 60px; z-index: 1; }
.inner-box3 figure.tt06{ opacity: 0; position: absolute; top: -200px; left: 50%; margin-left: -1000px; z-index: 1; }
.inner-box3 figure.tt07{ opacity: 0; position: absolute; top: -230px; right: 20px; z-index: 1; }
.inner-box3 figure.tt08{ opacity: 0; position: absolute; top: -200px; left: 60px; z-index: 1; }
.inner-box3 figure.tt09{ opacity: 0; position: absolute; top: -200px; right: 60px; z-index: 1; }
.rank-bb{background: url(../images/index/line-rank.png) no-repeat top center;  width: 1100px; margin: 0 auto; font-weight: bold;  font-size: 80px; padding: 40px 0 280px 0; }
#output2{ color: #fff; font-size: 25px; }
#stopwatchMinute2{ color: #333; }
#stopwatchSecond2{ color: #fcac20; }
#stopwatchMillisecond2{ color: #fcac20; }
#stopwatchMillisecond:last-letter{ display: none; }
.ggg1{ color: #333; }
.ggg2{ color: #fcac20; }
#main-contentsq .q-box ul li span{ cursor:pointer; }
.q-box{ background: url(../images/index/q-back.png) no-repeat top center; position: relative; padding: 90px 0; margin-bottom: 110px; }
.q-box span.q-no{ position: absolute; left: 0px; top: -50px; width: 100%; display: block; text-align: center;}
.q-box p{ text-align: center; margin-bottom: 60px; }
.q-box ul{ width: 980px; margin: 0 auto;}
.q-box ul li{ float: left; margin-left: 40px;}
#q12.q-box ul li{ float: left; margin-left: 15px; margin-bottom: 15px;}

.btn-er2{ font-size: 32px; font-weight: bold; line-height: 180%; color: #fff; padding: 30px; text-align: center; margin-bottom: 30px; width: 100%;}

#last-q{ display: none; background: url(../images/index/back03.jpg) no-repeat top center; height: 3070px; text-align: center;}
#last-q p{ padding-top: 2600px; }

#bottom-contents{ display: none; background: #010715;  text-align: center;}

#bottom-contents2{display: none; background: url(../images/index/back05.jpg) repeat-y top center; padding:100px 0 290px; text-align: center; position: relative;}
#bottom-contents2 .bottom-god{ width: 100%; text-align: center; bottom: -5px; position: absolute;}
#stopwatch{ width: 1200px; height: 815px; margin: 0 auto;background: url(../images/index/back04.jpg) no-repeat bottom center;  }
#stopwatch .inner-box{ padding-top: 230px; color: #fff; font-weight: bold; font-size: 100px; }

#last-q-box{display: none; opacity:0;}

#bottom-contents3{display: none; background:#000714 url(../images/index/bottm-back.jpg) no-repeat bottom center; height: 3000px;  }
#bottom-contents3 .btmch01{ text-align: center; padding-top: 240px; }
#bottom-contents3 .btmch02{ text-align: center; padding-top: 40px; }
#bottom-contents3 .btmch03{ text-align: center; padding: 170px 0 150px; }
#bottom-contents3 .btmch04{ text-align: center; padding: 0px 0 100px; width: 996px; margin: 0 auto;}
#bottom-contents3 .btmch04 li{ float: left;}


#copy{ text-align: center; position: relative; top: -50px; }

.msg{ position: relative; width: 1200px; margin: 0 auto 90px; }
.msg figure{ position: absolute; top: -60px; right: 70px; }

div#stopwatchWrapper {	text-align: center;}
#stopwatchControl {	text-align: center;	width: 400px;}
#stopwatchControl button {	font-size: 30px;	width: 6em;}
#fix-btn01{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
#fix-btn02{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
#fix-btn03{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
#fix-btn04{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
#fix-btn05{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
.s10{ display: none; }
.s30{ display: none; }
.s60{ display: none; }
.s60o{ display: none; }
.arrr{ text-align: center; margin-bottom: 130px; }
.result_mt{ margin: 50px 130px; }
#stop-w{position: relative; width: 1200px; margin: 0 auto;}
#stop-w2{ opacity:0; position: absolute; z-index: 5; left: 0; top: 0; }


#slide-div2{ width: 1266px; margin: 0 auto; }

}
@media screen and (max-width: 767px) {
#fix-btn01{ position: fixed; right: 0px; bottom: 0px; opacity:0; }
.pc{ display: none; }

.slideSampleThumbnail {  float: left;  list-style: none;  width: 100%;  height: 70px;  overflow: hidden;  position: relative;  top: 10px;}

div#stopwatchWrapper {	text-align: center;}
div#stopwatch {	font-weight: bold;	font-size: 30px;	text-align: center;	width: 100%;	padding-top: 50px;	padding-bottom: 50px;	border: 2px #000000 solid;	border-radius: 6px;	margin: 0 auto;}
#stopwatchControl {	text-align: center;	width: 400px;}
#stopwatchControl button {	font-size: 30px;	width: 6em;}
#fix-btn01{ position: fixed; right: 0px; bottom: 0px; opacity:0; }

#start-box{ width: 100%; background: url(../sp-images/index/name-back.jpg) top center no-repeat; background-size: 100% auto; height: 780px;  opacity:1; position: absolute;}
#start-box .inner-box{ width: 100%; margin: 0 auto; position: relative; height: 780px; padding-top: 320px; }
#start-box .inner-box #stopwatchStart{ cursor:pointer; width: 60%; margin: 0 auto;}
#start-box .inner-box #input{ width: 70%; text-align: center; padding: 10px; margin-left: 13%; font-size: 20px; margin-bottom: 70px; }

#main-contentsq #concept-box{ width: 100%;  }

.loll{ height: 70px; overflow: hidden; position: relative; }
.loll ul{ position: absolute; }
.loll ul li{ height: 70px; }

#main-contentsq {opacity:0; display: none; background:#f1f1ec; width: 100%; position: relative; padding: 0 0 20px 0; }
#q06{ position: relative; z-index: 5; }
#q11{ position: relative; z-index: 5; }
#q12{ position: relative; z-index: 5; }
#q13{ position: relative; z-index: 5; }
.inner-box3{ width: 100%; margin: 0 auto; position: relative; }
.inner-box3 figure.tt01{ position: absolute; top: -120px; right: 50px; z-index: 1; width: 70%; }
.inner-box3 figure.tt02{ position: absolute; top: -180px; left: 60px; z-index: 0; width: 75%;}
.inner-box3 figure.tt03{ position: absolute; top: -170px; right: 50px; z-index: 0; width: 65%;}
.inner-box3 figure.tt04{ position: absolute; top: -190px; left: 80px; z-index: 0; width: 60%;}
.inner-box3 figure.tt05{ position: absolute; top: -100px; left: 0px; z-index: 1; width: 35%;}
.inner-box3 figure.tt06{ position: absolute; top: -160px; left: 0px; margin-left: 0; z-index: 1; width: 210%; }
.inner-box3 figure.tt07{ position: absolute; top: -140px; right: -60px; z-index: 1; width: 65%;}
.inner-box3 figure.tt08{ position: absolute; top: -130px; left: -30px; z-index: 1; width: 45%;}
.inner-box3 figure.tt09{ position: absolute; top: -70px; right: 0px; z-index: 1; width: 35%;}

#main-contentsq .q-box ul li span{ cursor:pointer; }
.q-box{ background: url(../images/index/q-back.png) repeat-y top center; background-size: 170% auto; position: relative; padding: 50px 2% 90px 2%; margin-bottom: 30px; }
.q-box span.q-no{ position: absolute; left: 0px; margin-left: 30%; top: -50px; width: 40%; display: block; text-align: center;}
.q-box span.q-no02{ position: absolute; left: 0px; margin-left: 16%; top: -40px; width: 65%; display: block; text-align: center;}
.q-box p{ text-align: center; margin-bottom: 30px; }
.q-box ul{ width: 96%; margin: 0 2%;}
.q-box ul li{ margin-bottom: 10px; }
#q12.q-box ul li{ float: left; width: 19%; margin-right: 1%; }

.btn-er2{ font-size: 32px; font-weight: bold; line-height: 180%; color: #fff; padding: 30px; text-align: center; margin-bottom: 30px; width: 100%;}

#last-q{ display: none; background: url(../images/index/back03.jpg) no-repeat top center; background-size: 300% auto; text-align: center;}
#last-q p{ padding-top: 1360px; margin: 0 auto 0; width: 80%;}

#bottom-contents{ display: none; background: #010715;  text-align: center;}

.rank-bb{background: url(../images/index/line-rank.png) no-repeat top center;  width: 100%; margin: 0 auto; font-weight: bold;  font-size: 40px; padding: 40px 0 120px 0; }
#output2{ color: #fff; font-size: 20px; }
#stopwatchMinute2{ color: #333; }
#stopwatchSecond2{ color: #fcac20; }
#stopwatchMillisecond2{ color: #fcac20; }
#stopwatchMillisecond:last-letter{ display: none; }
.ggg1{ color: #333; }
.ggg2{ color: #fcac20; }

#bottom-contents2{display: none; background: url(../images/index/back05.jpg) repeat-y top center; background-size: 100% auto; padding: 60px 0 180px; text-align: center; position: relative;}
#bottom-contents2 .bottom-god{ width: 60%; margin-left: 20%; text-align: center; bottom: -5px; position: absolute;}
#stopwatch{ width: 100%; height: 450px; margin: 0 auto;background: url(../sp-images/index/scr-back.jpg) no-repeat bottom left; background-size: 96% auto; margin-left: 2%!important;  }
#stopwatch .inner-box{ padding-top: 120px; margin: 0 auto 20px; color: #fff; font-weight: bold; font-size: 25px; }

#last-q-box{display: none; opacity:0;}

#bottom-contents3{display: none; background:#000714 url(../images/index/bottm-back.jpg) no-repeat bottom center; height: 1650px; background-size: 150% auto; }
#bottom-contents3 .btmch01{ text-align: center; padding: 150px 5% 0 5%;}
#bottom-contents3 .btmch02{ text-align: center; padding: 40px 5% 0 5%;}
#bottom-contents3 .btmch03{ text-align: center; padding: 100px  5% 100px 5%;}
#bottom-contents3 .btmch04{ text-align: center; padding: 0px 5% 40px 5%;}

#copy{ text-align: center; position: relative; margin: 0 auto; width: 60%; top:0px; }

.msg{ position: relative; width: 100%; margin: 0 auto; }
.msg figure{ position: absolute; top: -80px; right: -20px; width: 30%; }

div#stopwatchWrapper {	text-align: center;}
#stopwatchControl {	text-align: center;	}
#stopwatchControl button {	font-size: 30px;	width: 6em;}
#fix-btn01-sp{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
#fix-btn02-sp{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
#fix-btn03-sp{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
#fix-btn04-sp{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
#fix-btn05-sp{ position: fixed; right: 0px; bottom: 0px; opacity:0; z-index: 10000; }
.s10{ display: none; }
.s30{ display: none; }
.s60{ display: none; }
.s60o{ display: none; }
.arrr{ margin: 80px auto 120px; width: 150px;}
.opa0sp{opacity: 0;}
.result_mt{ margin: 20px 50px; width: 70%;}
#sp-stop-w{position: relative; width: 100%; margin: 0 auto;}
#sp-stop-w2{ opacity:0; position: absolute; z-index: 5; left: 0; top: 0; }


#slide-div2{ width: 100%; margin: 0 auto; }

#stopwatchMillisecond:last-letter{ display: none; }

}
@media screen and (max-width: 380px) {

}
@media screen and (max-width: 321px) {

}