@charset "utf-8";
body {
  background: #000 url(../images/tokitoki-quiz-out/quiz-result-main.jpg) top center;
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: 0 auto;
}
/* container */
#Container {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
/* loading */
#Loading {
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: scroll;
  z-index: 9990;
  background-color: black;
}
/* alert */
#Alert {
  display: none;
  width: auto;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url(../images/alert.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 99999;
}
/* background */
#Black {
  display: none;
  width: 5000px;
  height: 2000px;
  z-index: 99998;
  position: fixed;
  background-color: black;
}
/* mainvisual */
.mainvisual {
  margin-top: 2040px;
  position: relative;
  width: 100%;
  height: 83px;
}
.mainvisual .arrow {
  position: absolute;
  top: -2000px;
  left: 150px;
  opacity: 0;
}
.mainvisual .wrap {
  position: relative;
}
.mainvisual .wrap .title1 {
  position: absolute;
  top: 20px;
  left: -18px;
}
.mainvisual .wrap .title1 .sub_text1 {
  position: absolute;
  top: -160px;
  left: 50px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text2 {
  position: absolute;
  top: -160px;
  left: 68px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text3 {
  position: absolute;
  top: -160px;
  left: 88px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text4 {
  position: absolute;
  top: -160px;
  left: 103px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text5 {
  position: absolute;
  top: -160px;
  left: 121px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text6 {
  position: absolute;
  top: -160px;
  left: 137px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text7 {
  position: absolute;
  top: -160px;
  left: 149px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text8 {
  position: absolute;
  top: -160px;
  left: 167px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text9 {
  position: absolute;
  top: -160px;
  left: 186px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text10 {
  position: absolute;
  top: -160px;
  left: 209px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text11 {
  position: absolute;
  top: -160px;
  left: 230px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text12 {
  position: absolute;
  top: -160px;
  left: 245px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text13 {
  position: absolute;
  top: -160px;
  left: 259px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text14 {
  position: absolute;
  top: -160px;
  left: 277px;
  opacity: 0;
}
.mainvisual .wrap .title1 .sub_text15 {
  position: absolute;
  top: -160px;
  left: 296px;
  opacity: 0;
}
.mainvisual .wrap .title2 {
  position: absolute;
  top: 2px;
  left: 2px;
}
.mainvisual .wrap .title2 .text1 {
  position: absolute;
  top: -114px;
  left: 29px;
  opacity: 0;
}
.mainvisual .wrap .title2 .text2 {
  position: absolute;
  top: -114px;
  left: 97px;
  opacity: 0;
}
.mainvisual .wrap .title2 .text3 {
  position: absolute;
  top: -114px;
  left: 152px;
  opacity: 0;
}
.mainvisual .wrap .title2 .text4 {
  position: absolute;
  top: -114px;
  left: 218px;
  opacity: 0;
}
/* message */
.message {
  position: relative;
  width: 100%;
}
.message .wrap {
  text-align: center;
}
.message .wrap .text {
  margin-bottom: 15px;
  opacity: 0;
}
.message .wrap .text02 {
  margin-bottom: 80px;
}
.message .wrap .text05 {
  margin-bottom: 80px;
}
.kiyaku1 {
  background: #000;
  position: relative;
  width: 100%;
}
.kiyaku1 .takeoutQuiz .coupon1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
}
.kiyaku1 .takeoutQuiz .route {
  position: absolute;
  top: 380px;
  left: 0px;
  width: 100%;
  text-align: center;
}
.kiyaku1 .takeoutQuiz .follow {
  position: absolute;
  top: 495px;
  left: -76px;
  width: 100%;
}
.kiyaku1 .takeoutQuiz .follow a {
  overflow: hidden;
  display: block;
  width: 125px;
  height: 40px;
  margin: 0 auto;
}
.kiyaku1 .takeoutQuiz .follow a:hover img {
  position: relative;
  top: -40px;
}
.kiyaku2 {
  background: #000;
  margin-bottom: 120px;
  overflow: hidden;
}
.kiyaku2 .detailBlock {
  position: relative;
  margin-top: 570px;
  width: 320px;
}
.kiyaku2 .detailBlock dl {
  width: 292px;
  margin: 0 auto;
  background-color: #1a1a1a;
  border: 4px solid #242934;
}
.kiyaku2 .detailBlock dl dt {
  display: block;
  cursor: pointer;
}
.kiyaku2 .detailBlock dl dt .icon {
  display: block;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.kiyaku2 .detailBlock dl dt .arrow {
  position: absolute;
  top: 18px;
  left: 282px;
  width: 8px;
  height: 5px;
  -webkit-transform-origin: 13px 8px;
          transform-origin: 13px 8px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.kiyaku2 .detailBlock dl dt .arrow.open {
  position: absolute;
  top: 8px;
  left: 269px;
  width: 8px;
  height: 5px;
  -webkit-transform-origin: 13px 8px;
          transform-origin: 13px 8px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.kiyaku2 .detailBlock dl dd {
  margin-left: 5px;
  margin-right: 5px;
}
.kiyaku2 .detailBlock dl dd p {
  margin-left: 5px;
  font-size: 1.07rem;
  line-height: 1.8;
  margin-top: 10px;
}
.kiyaku2 .detailBlock dl dd p span {
  width: 300px;
  height: 100px;
  color: white;
}
.kiyaku2 .detailBlock dl dd p span a {
  margin-top: 10px;
  color: white;
  display: block;
}
/* SNS */
.snsButtons {
  background: #000;
  position: relative;
  width: 100%;
  height: 63px;
  z-index: 1;
}
.snsButtons .tweet {
  position: absolute;
  top: -90px;
  left: 0px;
  width: 100%;
  text-align: center;
}
.snsButtons .tweet a {
  overflow: hidden;
  display: block;
  width: 300px;
  height: 60px;
  margin: 0 auto;
}
.snsButtons .tweet a:hover img {
  position: relative;
  top: -60px;
}
.snsButtons .tw {
  position: absolute;
  top: 0px;
  left: 15px;
}
.snsButtons .fb {
  position: absolute;
  top: 0px;
  left: 100px;
}
.snsButtons .hatena {
  position: absolute;
  top: 0px;
  left: 180px;
}
.snsButtons .line {
  position: absolute;
  top: 0px;
  left: 268px;
}
/* banner */
.banner {
  overflow: hidden;
  margin-top: 80px;
  background-color: black;
}
.banner .wrap {
  position: relative;
  height: 460px;
  margin: 0 auto;
}
.banner .wrap .bg {
  position: absolute;
  top: 0px;
  left: 14px;
}
.banner .wrap .title {
  position: absolute;
  top: 51px;
  left: 30px;
}
.banner .wrap .access {
  position: absolute;
  width: 100%;
  height: 300px;
  top: 90px;
  left: 30px;
  margin-top: 10px;
}
.banner .wrap .access .danraku {
  margin-left: 60px;
}
.banner .wrap .access p {
  color: white;
  font-size: 12px;
  margin-bottom: 15px;
}
.banner .wrap .detail {
  position: absolute;
  top: 270px;
  left: 30px;
}
.banner .wrap .detail a {
  overflow: hidden;
  display: block;
  width: 300px;
  height: 60px;
  margin: 0 auto;
}
.banner .wrap .detail a:hover img {
  position: relative;
  top: -60px;
}
.banner .wrap .btn {
  position: absolute;
  top: 338px;
  left: 30px;
}
.banner .wrap .btn a {
  overflow: hidden;
  display: block;
  width: 300px;
  height: 60px;
  margin: 0 auto;
}
.banner .wrap .btn a:hover img {
  position: relative;
  top: -60px;
}
.banner .wrap .tel {
  position: absolute;
  top: 412px;
  left: 35px;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.1;
  font-weight: bold;
  color: #fff;
  margin-bottom: 35px;
}
.banner .wrap .tel a {
  text-decoration: underline;
  color: #fff;
}
/* quiz link */
.quizlink .wrap {
  position: relative;
  text-align: center;
  height: 100px;
}
.quizlink .wrap .link {
  position: absolute;
  top: 16px;
  left: 10px;
}
.quizlink .wrap .link a {
  overflow: hidden;
  display: block;
  width: 300px;
  height: 60px;
  margin: 0 auto;
}
.quizlink .wrap .link a:hover img {
  position: relative;
  top: -60px;
}
/* footer*/
footer {
  position: relative;
  background-color: black;
  margin-top: -2px;
}
footer .bottom {
  box-sizing: border-box;
  width: 100%;
  height: 290px;
  padding-top: 15px;
}
footer .bottom .snsButtons {
  margin-bottom: 36px;
}
footer .bottom .logo a {
  text-align: center;
  display: block;
  margin-bottom: 28px;
}
footer .bottom #copyright {
  font-size: 1.1rem;
  color: #fff;
  line-height: 2;
  text-align: center;
}
footer .bottom #copyright a {
  color: #fff;
  text-decoration: none;
}