@charset "UTF-8";
/* Scss Document */
/* 見出し */
/* ==========================================================================
   下層ページ
========================================================================== */
.page-container {
  margin: 100px 0;
}

.article01 {
  display: flex;
  max-width: 550px;
  margin: 0 auto;
}

.article01 .i_metro img {
  width: 130px;
}

.article01 figcaption {
  max-width: 300px;
}

.article02 {
  display: flex;
}

.article02 figcaption {
  width: 70%;
  margin-left: auto;
}

.article02 .i_metro {
  margin-bottom: -7px;
}

h5.st {
  background-color: #ffd400;
  text-align: center;
  padding: 30px 0;
}

h5.st01 img {
  height: 25px;
}

h5.st02 img {
  height: 60px;
}

.wrap-metro {
  margin: 0 auto 30px;
}
.wrap-metro .icon-mereo {
  width: 80px;
}
.wrap-metro .caption-metro {
  width: 80%;
  margin: 5px 0 0 10px;
  color: #ffd400;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .article02 .i_metro {
    width: 140px;
    padding-left: 30px;
  }

  .article02 .i_metro_b {
    width: 110px;
    padding-left: 30px;
  }

  .wrap-metro {
    max-width: 550px;
  }
  .wrap-metro .caption-metro {
    width: 80%;
    margin: 10px 0 0 10px;
  }

  .t_play {
    max-width: 300px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .article02 .i_metro, .article02 .i_metro_b {
    width: 110px;
  }

  .article02 figcaption {
    width: 60%;
    margin-left: auto;
  }

  .article01 figcaption.cap-right {
    width: 50%;
    margin-left: auto;
  }
  .article01 figcaption.cap-left {
    width: 50%;
    margin-right: auto;
  }
}
/* イベント情報 */
div.event-c03 {
  margin: 60px 0;
}

div.schedule {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  text-align: center;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  max-width: 550px;
  margin: 0 auto;
}

.schedule .day {
  font-size: 1.8rem;
}

.schedule .arrow img {
  vertical-align: text-top;
}

.s-info {
  color: #a0a0a0;
  border: 1px solid;
  display: block;
  padding: 10px 40px;
  font-weight: 600;
  border-radius: 5px;
  margin: 30px auto 0;
  max-width: 160px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .article01 figure {
    margin: 0 20px;
  }
  .article01 figcaption {
    max-width: 300px;
  }

  figcaption.cap-left {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  div.event-c02 {
    margin-top: 30px;
  }

  .schedule .day {
    font-size: 1.3rem;
  }

  .schedule .unit {
    font-size: 1.1rem;
  }
}
/* キット購入方法 */
.map-img img {
  width: 400px;
}

a.js-modal-close {
  position: absolute;
  top: -20px;
  right: -20px;
}

@media screen and (max-width: 768px) {
  .map-img {
    width: 90%;
    margin: 0 auto;
  }

  a.js-modal-close {
    top: -20px;
    right: 0;
  }
}
/* 参加方法・遊び方 */
.w_play {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.w_play li {
  width: 50%;
  min-width: calc(100% / 2);
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
.w_play .item01 {
  padding-bottom: 40px;
}
.w_play .item02 {
  padding-bottom: 40px;
}
.w_play h6 {
  text-align: center;
}

.icon-no {
  margin-bottom: 20px;
}

.w_howto .icon_point img {
  width: 70px;
  margin-right: 5%;
}

.w_howto .icon_point {
  margin-right: 5px;
}

div.t_reccomend {
  margin-left: 20px;
}

.w_reccomend li {
  margin-bottom: 30px;
}

ul.w_need {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: center;
}
ul.w_need li {
  width: 50%;
  margin: 0 auto;
}
ul.w_need li:nth-child(3) {
  margin-top: 30px;
}
ul.w_need li img {
  max-width: 100px;
}

@media screen and (max-width: 768px) {
  .w_howto p {
    font-size: 0.7rem;
    width: 70%;
  }

  .w_howto .icon_point {
    width: 50%;
  }
  .w_howto .icon_point img {
    width: 60px;
    margin-right: 5%;
  }

  div.t_reccomend {
    width: 70%;
  }

  .w_play {
    display: block;
  }
  .w_play li {
    width: 100%;
  }
}
/* 注意事項・よくある質問 */
section.faq-mgn {
  margin-top: 63px;
}

ul.w_faq li {
  margin-bottom: 40px;
}

ul.bt-faq {
  max-width: 550px;
  margin: 0 auto;
  text-align: center;
}
ul.bt-faq li {
  width: 50%;
}
ul.bt-faq li a {
  color: #a0a0a0;
  display: block;
  font-size: 1.0rem;
  font-weight: bold;
  padding: 15px;
}
ul.bt-faq li:first-child {
  border-right: 1px solid #3e3e3e;
}

.faq-arrow {
  display: block;
}
.faq-arrow img {
  width: 20px;
}

/* お試し謎解き */
ul.bn_wrap_otameshi {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 650px;
  margin: 0 auto;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
ul.bn_wrap_otameshi li {
  width: 48%;
  margin: 0 0 20px 0;
}

.q_wrap img {
  max-width: 100%;
}

.hint-accordion {
  min-width: 300px;
  margin: 40px auto 0;
  padding: 0;
}
.hint-accordion label {
  display: block;
  background: #3e3e3e;
  cursor: pointer;
  padding: 10px;
  color: #fff;
  box-sizing: border-box;
}
.hint-accordion .ac-cont {
  transition: 0.2s;
  height: 0;
  overflow: hidden;
  background: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  color: #3e3e3e;
  text-align: left;
  font-size: 12px;
}
.hint-accordion .ac-cont a {
  color: #3e3e3e;
  font-weight: bold;
  text-decoration: underline;
}
.hint-accordion input {
  display: none;
}
.hint-accordion .c-ico-btn_arrow {
  padding-right: 10px;
}

.hint-accordion input:checked + .ac-cont {
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}

.answerArea {
  max-width: 550px;
  margin: 0 auto;
  text-align: center;
}

.t_answer {
  max-width: 520px;
  height: 50px;
  margin: 40px auto;
}

.btn_answer {
  max-width: 100px;
  margin: 0 auto;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  font-weight: bold;
  width: 80%;
  font-size: 16px;
  padding: 0 10px;
}

.share-wrap {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
.share-wrap .hstag {
  position: absolute;
  top: -30px;
  right: 0;
}

ul.share-btn {
  max-width: 250px;
  margin: 0 auto;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
ul.share-btn li {
  width: calc(100% / 3);
  padding: 5%;
}

div.flex-box {
  display: flex;
}
div.flex-box .img {
  margin: 15px 30px 0 0;
}

figcaption.comment_01 {
  padding-top: 45px;
}

figcaption.comment_02 {
  padding-top: 35px;
}

figcaption.comment_03 {
  padding-top: 20px;
}

@media screen and (max-width: 768px) {
  section.faq-mgn {
    margin-top: 38px;
  }

  .share-wrap .hstag {
    width: 80px;
  }

  div.flex-box {
    display: block;
  }
  div.flex-box .img {
    margin: 0;
  }

  ul.bn_wrap_otameshi li {
    margin: 0 0 10px 0;
  }

  figcaption.comment_01 {
    padding-top: 30px;
  }

  figcaption.comment_02 {
    padding-top: 25px;
  }

  figcaption.comment_03 {
    padding-top: 0;
  }
}
/* 過去の公演の様子 */
.voice-box {
  margin-bottom: 40px;
  max-width: 500px;
  margin: 40px auto;
}
.voice-box a {
  color: #a0a0a0;
}

.tweet-box {
  background-color: #fff;
  color: #000;
  padding: 20px;
  max-width: 500px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* スペシャル */
.special .sp_wrap {
  padding: 30px 20px 0;
}
.special .sp_wrap .bt-center {
  margin: 30px 0 0;
}
.special .sp_wrap .txt {
  font-size: 0.9rem;
}

ul.sp-info {
  margin-top: 40px;
}
ul.sp-info li {
  margin: 20px 0 0;
}

.item-sp {
  margin: 40px 0 30px;
}

@media screen and (max-width: 768px) {
  .item-sp {
    margin: 20px 0 30px;
  }
}
/* 遊び方 */
.special-howto .intr-howto .icon {
  width: 150px;
  margin: 20px auto;
}
.special-howto .intr-howto .youtube {
  margin: 0 auto;
}

.special-howto .line-top {
  display: flex;
  font-size: 1.2rem;
  max-width: 170px;
  margin-bottom: -10px;
}
.special-howto .line-top .icon-mv {
  width: 40px;
}
.special-howto .line-top .head {
  line-height: 2;
  margin-left: 8px;
}

.contents-howto .time {
  width: 110px;
  margin: 0 auto -8px;
}

.contents-howto-inner {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 10% 5%;
  color: #0c0600;
  text-align: center;
}
.contents-howto-inner p {
  font-weight: bold;
  margin-top: 10px;
}
.contents-howto-inner figcaption {
  margin: 0 0 10px;
}
.contents-howto-inner figure.img-second {
  margin: 30px 0 0;
}
.contents-howto-inner .notes {
  font-size: 0.7rem;
  line-height: 1.4em;
}
.contents-howto-inner p.inline {
  display: inline-flex;
}
.contents-howto-inner .txt-inline {
  padding: 15px 0 0 10px;
}

.point-wrap .point {
  margin: 0 0 20px;
  padding: 30px 0 0;
}

@media screen and (max-width: 768px) {
  .contents-howto .time {
    margin: 0 auto -7px;
  }
}
/* 当たりくじ */
.atarikuji ul.sp-info li {
  margin: 40px 0 0;
}
.atarikuji ul.sp-info .item {
  border-bottom: 1px solid #3e3e3e;
  padding: 20px 0 15px 0;
}
.atarikuji .official-sns p {
  color: #a0a0a0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 40px 0 10px;
}
.atarikuji .official-sns ul {
  display: flex;
  width: 70%;
  margin: 0 auto;
}
.atarikuji .official-sns ul li {
  width: 50%;
  text-align: center;
  border-bottom: 1px solid #3e3e3e;
  border-top: 1px solid #3e3e3e;
}
.atarikuji .official-sns ul li:first-child {
  border-left: 1px solid #3e3e3e;
}
.atarikuji .official-sns ul li:last-child {
  border-right: 1px solid #3e3e3e;
  border-left: 1px solid #3e3e3e;
}
.atarikuji .official-sns ul li a {
  display: block;
}
.atarikuji .official-sns ul .tw a {
  padding: 30px 0 20px;
}
.atarikuji .official-sns ul .tw a img {
  width: 40px;
}
.atarikuji .official-sns ul .ig a {
  padding: 30px 0 20px;
}
.atarikuji .official-sns ul .ig a img {
  width: 35px;
}

.atarikuji .notes {
  margin: 40px 0 0 0;
}
.atarikuji .notes p {
  margin: 20px 0 0 0;
}

@media screen and (max-width: 768px) {
  .atarikuji .official-sns ul {
    width: 100%;
  }
}
/* アンケート */
.page-q {
  padding-bottom: 100px;
}
.page-q .title {
  font-size: 1.4rem;
  margin-bottom: 30px;
}
.page-q .lead {
  font-size: 1rem;
  margin-top: 10px;
}
.page-q .copyright {
  text-align: center;
  color: #a0a0a0;
  font-size: .8rem;
}

.help-text::before {
  content: '*';
  color: #ffb630;
}

ul.w_ticket {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

ul.w_ticket li {
  width: 50%;
  min-width: calc(100% / 2);
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

ul.w_ticket li p a {
  color: #ffffff;
  text-decoration: underline;
}

ul.w_ticket li p a:hover {
  text-decoration: none;
}

ul.w_purchese li {
  margin-bottom: 30px;
}

ul.w_purchese li .number img {
  width: 40px;
}

.widSSPnarrow {
  width: 100% !important;
}

.area_q {
  max-width: 520px;
  text-align: left;
  margin: 0 auto;
}

.area_q input {
  width: auto;
}

.area_q .radio_wrap span {
  margin-left: 20px;
}

.q_title {
  color: #ffb630;
  margin: 40px 0 10px;
}

input.q_form {
  width: 100%;
  max-width: 520px;
  height: 50px;
  margin: 10px 0 0 0;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
}

.q_form_s {
  max-width: 50px;
  height: 50px;
  margin: 10px 0 0 0;
  border: none;
  border-radius: 0;
}

.q_choose {
  width: 50%;
  display: block;
  height: 50px;
  margin: 0;
  background-color: #fff;
  font-weight: bold;
}

.q_textarea {
  width: 100%;
  box-sizing: border-box;
}

.form-pickup {
  width: 45%;
  height: 50px;
  background-color: #fff;
  font-weight: bold;
}

.btn_q {
  margin: 0 auto;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
}

/* 段差なしコース */
.universal .item_block {
  margin: 0 0 80px;
}
.universal .item_block label {
  text-align: center;
}
.universal .item_block .icon {
  width: 70px;
  margin: 0 auto;
}
.universal .item_block .img {
  text-align: center;
}
.universal .item_block .hint-accordion {
  margin: 20px 0 0;
}

/* ==========================================================================
   ヒント・アンサー
========================================================================== */
/* ヒント */
.hint .head, .answer .head {
  text-align: center;
}
.hint .icon-mereo, .answer .icon-mereo {
  width: 170px;
  margin: 0 auto 20px;
}
.hint .title, .answer .title {
  width: 240px;
  margin: 0 auto 60px;
}
.hint .title-f, .answer .title-f {
  width: 340px;
  margin: 0 auto 60px;
}
.hint .guide, .answer .guide {
  text-align: center;
  margin: 60px 0 0;
}
.hint .item_block, .answer .item_block {
  margin: 0 0 120px;
}
.hint .item_block .hint-accordion, .answer .item_block .hint-accordion {
  margin: 20px 0 0;
}
.hint .item_block label, .answer .item_block label {
  text-align: center;
}

.btn_gray {
  max-width: 240px;
  margin: 0 auto;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
}

.answer .icon-mereo-fq {
  width: 280px;
  margin: 40px auto 100px;
}
.answer div.btn_fq {
  max-width: 780px;
  margin: 0 auto 250px;
}

p.txt_end01 {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 2.2;
  letter-spacing: 0.1em;
  margin-bottom: 400px;
}

p.txt_end02 {
  font-size: 1rem;
  line-height: 2.2;
  margin: 30px 0 70px;
}

div.area_answer {
  margin: 140px 0 0;
}
div.area_answer .t_fa {
  max-width: 300px;
  margin: 0 auto;
}

.final div.btn_fq {
  max-width: 780px;
  margin: 120px auto -50px;
}
.final .area_answer {
  margin-bottom: 250px;
}

@media screen and (max-width: 768px) {
  p.txt_end01 {
    font-size: 1rem;
  }

  .final div.btn_fq {
    margin: 100px auto -50px;
  }
}
/* ==========================================================================
エンディングページ
========================================================================== */
.ending__congrats {
  height: 100vh;
}

.ending div {
  text-align: center;
}

.ending__congrats__cont {
  cursor: pointer;
  display: inline-block;
}
.ending__congrats__cont img {
  width: 500px;
}

.ending_message {
  background: url(../tkt/images/ending_message.png) no-repeat center center;
  height: 3515px;
}

.ending__staff {
  background: url(../tkt/images/ending_staff.png) no-repeat 50% center;
  height: 3105px;
  margin-bottom: 100px;
}

.ending__hosts {
  margin-bottom: 180px;
}

.ending__fin {
  padding-top: 50px;
}

.ending__fin__img {
  margin-bottom: 700px;
}

.ending__enquete {
  text-align: center;
  margin: 0 auto 50px;
}

.ending__enqueteLead {
  margin-bottom: 20px;
}

.ending__btn {
  margin: 50px 0 45px;
}

.ending_start {
  margin-top: 40px;
  cursor: pointer;
}

.ending .container {
  padding-top: 100px;
}
.ending .shareBox {
  margin: 0 auto 30px;
}
.ending .shareBox .shareSNS {
  max-width: 400px;
}
.ending .shareBox .shareSNS li {
  width: 80px;
}

.grad {
  background-color: #fff000;
}

.ending-gra {
  /*	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(117,110,0,1) 50%, rgba(255,240,0,1) 100%);
   background-size: 150% 150%;*/
  animation: grad 6s linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes grad {
  0% {
    background-position: 0% 0%;
    background-color: #fff000;
  }
  50% {
    background-position: 50% 50%;
    background-color: #756e00;
  }
  100% {
    background-position: 100% 100%;
    background-color: black;
  }
}
.ending__copy {
  margin: 200px auto 50px;
  text-align: center;
  font-size: 12px;
}

.ending__logo {
  margin: 700px 0 400px;
}

.english__btn__japanese {
  background: #0C0600;
  padding: 30px 0;
}
.english__btn__japanese img {
  vertical-align: middle;
}

.dorayaki {
  width: 100px;
  margin: 600px auto 0;
}

a.bt-end {
  padding: 18px 0 0 0px;
}

@media (max-width: 767px) {
  .ending_message {
    background-size: contain;
    height: 1700px;
  }

  .ending__staff {
    background-size: contain;
    background-position: 70% center;
    height: 1800px;
  }
}
/* ==========================================================================
   クーポン
========================================================================== */
.coupon_titleImg {
  margin-bottom: 15px;
}

.selectBox {
  margin: 25px 0;
}

.selectBox select {
  width: 100%;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #999;
  background: #eee;
  background: url(../coupon/images/arrow.png) right 50% no-repeat;
  background-color: #fff;
  background-size: 12px, 100%;
  background-position: right 10px center;
}

.t_orange-l {
  font-size: 1.2rem;
  color: #ffb630;
  text-align: left;
  margin-bottom: 15px;
  font-weight: bold;
}

.coupon_wrapper {
  background-color: #fff;
  margin-bottom: 25px;
}

.coupon_info {
  color: #000;
  background-color: #fff;
  padding: 15px 20px;
}

.coupon_info_unit {
  margin-bottom: 25px;
}

.highlighted {
  font-size: 90%;
  width: 90%;
  margin: 0 auto 10px;
  background-color: #f4dc00;
  border-radius: 7px;
  padding: 12px 12px;
  color: #000;
}

.coupon_info_body {
  font-size: 80%;
  color: #000;
}

.coupon_info_body a {
  color: #ffb630;
  text-decoration: underline;
}

.coupon_info hr {
  margin: 20px 0;
}