@charset "utf-8";

/* Scss Document */
/* ==========================================================================
  Base
   ========================================================================== */

$back_black:#0c0600;
$orange:#ff8a00;
$softorange:#ffa500;
$yellow:#ffd400;
$text_gray:#a0a0a0;
$btn_black:#3e3e3e;


.page_container {
	margin-top:80px;
	hr.grayR {
		border:none;
		background:url(../images/hr.svg) no-repeat top center;
        max-width: 520px;
        height: 15px;
		border: none;
	}
	
}


.capTitle {
	color:$softorange;
	font-size:18px;
}
.caption_s_L {
	font-size:14px;
	text-align: left;
}
.caption_s_C {
	font-size: 14px;
	text-align: center;
	
}

.figureMgn {
	margin: 30px 0;
}
.bottomBanner {
	display: none;
}
.grayLine {
	background: $btn_black;
	padding: 30px;
	position: relative;
	p {
		text-align: center;
		width: 40%;
		margin: 0 auto;
	}
	.iconRound {
		position:absolute;
		left: 0;
    right: 0;
    margin: auto;
    width: 400px;
		top: 80px;
	}
	
}

.mgt20 {
	margin-top: 20px;
}
.mgt70 {
	margin-top: 70px;
	
}
.font17 {
	font-size: 17px;
}

.clb {
	clear: both;
}

.col2 {
	display: table;
    table-layout: fixed;

}
.col2Item {
/*	    display:inline-table;
*/    vertical-align: middle;
	float: left;
    text-align: center;
    width: 50%;
	padding: 0 40px;
	box-sizing: border-box;
	margin-bottom: 60px;

}
.col2Item:nth-child(odd) {
	
}
	.bannerS{
        margin: 20px auto;
        max-width: 170px;
		
	}
.contTop {
	padding: 20px 0 40px;
	margin: 0 auto;
	max-width: 520px;
	.boxLeft {
		width: 180px;
		float: left;
		
	}
	
} 
.eventBox {
		margin: 40px 0;
		
}

.pcbr br {
	display: none;
}

/* ==========================================================================
   イベント情報
   ========================================================================== 
*/

.title_event {
	background:url(../event/images/title_event.png) no-repeat top center;
	max-width: 700px;
	margin: 0 auto;

}
.title_eventSP {
	display: none;
}

.eventBoxF {
	margin: 0 0 40px;
}
.eventBoxB {
	margin: 40px 0 0;
	
}
.box_01 {
	.boxLeft {
		width: 180px;
		float: left;
		margin-right: 30px;
		
	}
	
	
}

.box_02{
	.boxRight {
		width: 180px;
		margin-left: 50px;
		float: right;

	}
	
	
}

.kaisai {
	p {
		margin-top: 30px;
		text-align: center;
		
	}
	
}
.eventPlay {
	ul {
		li {
			width: 50%;

			figre {
				text-align: center;
				margin-top: 20px;

				
			}
			
		}
		
	}
	p {
		
	}
	
}

.contIntr {
	overflow: hidden;
	font-size: 15px;
	
}

#event .bannerS {
	float: none;
	margin: 20px auto;

}

/* ==========================================================================
  キット購入方法
   ========================================================================== */

.title_kit {
	background:url(../kit/images/title_kit.png) no-repeat top center;
	max-width: 700px;
	margin: 0 auto;

}
.title_kitSP {
	display: none;
}


.kit {
	.col2Item {
		    padding: 0 10px;
		margin-bottom: 20px;
	}
	
}
.eventBox {
	p {
		text-align: center;
		
	}
	.smallGray {
	color: $text_gray;
	font-size: 12px;
	text-align: left;
	
}

}
.smallGrayC {
		color: $text_gray;
	font-size: 12px;
	text-align:center;

}


/* ==========================================================================
  参加方法&遊び方
   ========================================================================== */
 
.title_howto {
	background:url(../howto/images/title_howto.png) no-repeat top center;
	max-width: 700px;
	margin: 0 auto;

}
.title_howtoSP {
	display: none;
}


.howto {
	
}
.howtoIcon {
	.col2Item{
		margin-bottom: 30px;
		
	}
	
}
.with{
	h5{
		float: left;
		width: 200px;
		
	}
	li {
		margin-bottom: 30px;
		
	}
	.bannerS{
		float: right;
		margin-top: 20px;
		max-width: 170px;
	}
	
}
.osusume {
	.iconRound {
		top: 130px;
		
	}
	
}
/* ==========================================================================
  注意事項・FAQ
   ========================================================================== */
 .title_faq {
	background:url(../faq/images/title_faq.png) no-repeat top center;
	 	max-width: 700px;
	margin: 0 auto;
}
.title_faqSP {
	display: none;
}

.faqLink {
	max-width: 700px;
    margin: 0 auto;
	ul {
		li {
			width: 50%;
			margin: 0 auto;
			text-align: center;
			margin-top: -20px;
			a {
				display: block;
				padding: 20px;
			border-right: 1px solid $btn_black;

			}
			&:first-child {
				border-left: 1px solid $btn_black;
			}
			
		}
	}
}
#faq {
	hr.grayR {
		max-width: 700px;
		height: 20px;
	}
}
.question {
	color: $orange;
	font-size: 18px;
	margin-bottom: 10px;
}
.faq{
	li {
		max-width: 520px;
		padding: 20px 6%;
		margin: 0 auto;
		
	}
	
}   
.answer {
	font-size: 14px;
	margin-bottom: 10px;

}
.faqWrap {
	padding: 30px 0;
}
/* ==========================================================================
  過去の公演の様子
   ========================================================================== */
.title_kako {
	background:url(../kako/images/title_kako.png) no-repeat top center;
		max-width: 700px;
	margin: 0 auto;

}
.title_kakoSP {
	display: none;
}
.youtube {
	max-width: 520px;
	margin: 20px auto 40px;
position: relative;
overflow: hidden;
}

.lastyear_voice {
	text-align: center;
	li {
		margin-bottom: 30px;
	}
}

#kako {
	.bannerList {
		li {
			margin-bottom: 20px;
		}
	}
}


/* ==========================================================================
  練習問題に挑戦
   ========================================================================== */
.title_renshu {
	background:url(../renshu/images/title_renshu.png) no-repeat top center;
		max-width: 700px;
	margin: 0 auto;

}
.title_renshuSP {
	display: none;
}

.renshu {
	.bannerList {

		li {
			margin:20px 0 0;
			max-width: 49%;
			display: inline-block;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

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

}

.answerArea {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}
.t_answer {
	max-width: 520px;
    height: 50px;
	margin: 40px auto;
}
button {
	padding: 0;
	display: block;
}
.btn_answer{
	max-width: 100px;
	margin: 0 auto;
	text-align: center;
	background: none;
    border: none;
    cursor: pointer;
	
}
	.btn_qback {
		margin: 30px 0 50px;
		text-align: center;
	}

.resultBox {
	margin: 30px 0;
	.boxLeft {
		float: left;
		margin-right: 40px;
	}
	.comment {
	font-size: 15px;
	text-align: left;
	overflow: hidden;
	}
}

.mondai {
	li {
		margin: 40px 0;
	}
}

#renshu01 {
	margin-top: -10px;
}

.shareBox {
	text-align: center;
	position: relative;
	padding: 20px 0;
	.hstag {
		position: absolute;
		top: 0;
		right: 20px;
	}
	.shareTxt {
		color: $text_gray;
		margin: 30px 0;
	}
	.shareSNS {
		display: flex;
		justify-content: space-between;
		max-width: 300px;
		margin: 0 auto;
		li {
			width: 48px;
			margin: 0 auto;
			
		}
	}
}

/* ==========================================================================
  お問い合わせ
   ========================================================================== */
.title_contact {
	background:url(../contact/images/title_contact.png) no-repeat top center;
		max-width: 700px;
	margin: 0 auto;

}
.title_contactSP {
	display: none;
}

#contact {
	.resultBox {
		margin-top:0;
	}

	.bannerS {
		margin: 0 auto;
	}
}

.contactBox {
	margin: 0 auto;
	.comment {
		padding-top: 20px;
	}
	.boxLeft {
		width: 100px;
	}
}

/* ==========================================================================
  スペシャル
   ========================================================================== */

.title_specialSP {
	display: none;
}

.title_special {
	background: url(../special/images/title_special.png) no-repeat top center;
	max-width: 700px;
    margin: 0 auto;
}

.sp_maintxt {
	font-size: 13px;
	color: #cac7c7;
}

#sp_01 , #sp_02 , #sp_03 , #sp_04 {
	.menu_friends {
		margin: 0 auto;
		text-align: center;
		p {
			color: $text_gray;
			margin-bottom: 20px;
			font-size: 16px;

		}
	.menu_sns {
		    max-width: 250px;
		margin: 0 auto;

		
		li {
			width:48px;
			float: left;
			margin-left: 25px;
			a {
			}
		}
	}
	}
	.bannerList {
		margin: 20px 0 40px;
		li {
			margin-bottom: 20px;
		}
	}
}


#sp_02 , #sp_03 , #sp_04 {
	.sp_date {
		font-size: 18px;
		color: $text_gray;

		ul {
			li {
				margin-bottom: 20px;
			}
		}
		.sp_date_txt {
			
		}
		.sp_page_banner {
			max-width: 170px;
			margin-top: 20px;
		}
	
	}
}

.ginza_nazo {
	.nazo_namber {
		margin-bottom: 20px;
	}
	li {
		margin-bottom: 50px;
		.answerArea {
			input {
				margin: 0 auto 20px;
				
			}
			button {
				
			}
		}
	}
}


.modal_wrap {
}

.modal_currect , .modal_currect2 , .modal_currect3 , .modal_currect4 , .modal_currect5 , .modal_currect6 , .modal_currect7 , .modal_currect8 , .modal_currect9 , .modal_currect10 , .modal_currect_irhs1 , .modal_currect_irhs2 , .modal_currect_tric {
	display: none;
	position: fixed;
	max-width: 420px;	
	z-index: 2;
	top: 5%;
	margin: 0 auto;
	background: $back_black;
	border: 2px solid $orange;
	left: 0;
	right: 0;
	padding:30px 6%;
	text-align: center;
	cursor: pointer;


	.shareBox {
		padding: 0;
	}
	.hstag {
		right: 0;
	}
		.ginza_metrosan {
				max-width: 100px;
				margin: 0 auto 20px;
	}


}
.modal_incurrect {
	display: none;
	position: fixed;
	max-width: 420px;
	background: $back_black;
	color: #fff;
	border-radius: 3px;
	border: 2px solid $orange;
	z-index: 2;
	top: 20%;
	margin: 0 auto;
	left: 0;
	right: 0;
	padding:30px 6%;
	text-align: center;

}

#retryG {
	cursor: pointer;
}
.bt_retry {
	margin-bottom: 40px;
}

.sp_botton {
 margin: 0 auto 80px;
	max-width: 170px;
	
}




	
.hint-accordion {
  min-width: 300px;
  margin: 40px auto 0;
  padding: 0;
}
.hint-accordion .ac-content {
  margin: 0;
  padding: 0;
}
.hint-accordion input {
  display: none;
}
.hint-accordion label {
  display: block;
  background: $softorange;
  cursor: pointer;
  padding: 5px;
  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: $btn_black;
	text-align: left;
	font-size: 12px;
}
.hint-accordion input:checked + .ac-cont {
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}


/* ==========================================================================
   ヒントページ
   ========================================================================== 
*/

.ah_container {
	margin-top: 120px;
}
.title_hintSP {
	display: none;
}
.title_hint {
	background: url(../hint/images/title_hint.png) no-repeat top center;
	max-width: 700px;
    margin: 0 auto;
}

.hint__wrap {
	li {
		margin:60px 0;
		.hint__title {
			margin-bottom: 40px;
		}
		.hint__color {
			width: 50%;
			float: left;
			text-align: center;
			margin: 0 0 40px;
		}
		.hint__color__blue {
			clear: both;
		}
		.hint__abc {
			width: 50%;
			float: left;
			margin: 0 0 40px;
			
		}
		.hint__img {
			margin: 0 auto 20px;
		}
	}
}

/*#hint {
	p.caption_s_C {
		color: #5b5b5b;
		font-weight: 600;
	}
	.bannerS {
		border: 0;
	}
}
.smallBlack {
	color:$back_black;
    font-size: 12px;
    text-align:center;
}
.ah_title_wrap {
		background:#fff;
		position: relative;

}
.ah_wrap {
	background:#fff;
	color:#5b5b5b;
    border-bottom: 1px solid #5b5b5b;
}
.w100 {
	width: 100%;
}
.h30 {
	height: 30px;
}
.back_orange {
		background:$orange;
}
.back_lightgray {
	background: #f3f2f2;
}
.back_black {
			background:$back_black;

}
*//* ==========================================================================
   ANSWER
   ========================================================================== 
*/


.title_answerSP {
	display: none;
}
.title_answer {
	background: url(../answer/images/title_answer.png) no-repeat top center;
	max-width: 700px;
    margin: 0 auto;
}
#answer {

	.contIntr {
		padding-top: 20px;
	}
}
	.btn_answer_hint {
		background: none;
		cursor: pointer;
		max-width: 100%;
		margin: 0 auto 40px;
		border: none;
	}

/* ==========================================================================
  English
   ========================================================================== */
.en {
	.japanese {
		margin-bottom: 15px;
	}
	.catch {
		top: 15%;
	}
	.pc_answer {
		text-align: center;
		ul {
			li {
				display: inline-block;
				    margin: 0 30px;
			}
		}
	}
	
}

.english {
	.ending div {
	text-align: center;
}
.ending__congrats__cont {
	cursor:pointer;
	display:inline-block;
}
.ending_message {
	background:url(../en/dpc/images/ending_message_04.png) no-repeat center top;
	height:2361px;
	margin-bottom: 100px;
}
.ending__staff {
	background:url(../en/dpc/images/ending_staff_04.png) no-repeat 45% center;
	height:2123px;
	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 {
	.shareBox {
		margin: 0 auto 30px;
	.shareSNS {
		max-width: 400px;
		li {
			width: 80px;
		}
	}
}
}
.ending__copy {
	margin: 200px auto 50px;
	text-align: center;
	font-size: 12px;
}
.ending__logo {
	margin: 700px 0 100px;
}

}
.english_answer {
	header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	.page_container {
		margin-top: 120px;
	}
}


.title_hintenSP {
	display: none;
}
.title_hinten {
	background: url(../hint/images/title_hinten.png) no-repeat top center;
	max-width: 700px;
    margin: 0 auto;
}

/* ==========================================================================
   エンディングページ
   ========================================================================== */
.ending div {
	text-align: center;
}
.ending__congrats__cont {
	cursor:pointer;
	display:inline-block;
}
.ending_message {
	background:url(../dpc/images/ending_message_04.png) no-repeat center top;
	height:2361px;
	margin-bottom: 100px;
}
.ending__staff {
	background:url(../dpc/images/ending_staff_04.png) no-repeat 45% center;
	height:2026px;
	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 {
	.shareBox {
		margin: 0 auto 30px;
	.shareSNS {
		max-width: 400px;
		li {
			width: 80px;
		}
	}
}
}
.ending__copy {
	margin: 200px auto 50px;
	text-align: center;
	font-size: 12px;
}
.ending__logo {
	margin: 700px 0 100px;
}
.english__btn__japanese {
	background: #0C0600;
	padding: 30px 0;
	img {
		vertical-align: middle;
	}
}
/* ==========================================================================
   アンケート
   ========================================================================== */
.stamp_box {
	margin: 20px 0 30px;
	.stamp_txt {
		margin: 0 0 20px;
		color: $text_gray;
	}
}


/* ==========================================================================
   SP
   ========================================================================== */
/* Base */   

@media screen and (max-width:767px) {
		
.page_container {
	padding-top: 20px;
}

.capTitle {
	font-size:15px;

}
.caption_s {
	font-size:12px;
}

	.bottomBanner {
			background: #fff;
	width: 100%;
		display: block;
		margin-bottom: -10px;
		img {
			vertical-align: text-bottom;
		}
		
	}
	
.grayLine {
	background: $btn_black;
	padding: 30px;
	
	p {
		text-align: center;
		width: 70%;
	}
	.iconRound {
    max-width: 300px;
	}

	
}
	
.col2Item {
	padding: 5px;
    margin-bottom: 20px;
	}
	
	.contTop {
	padding:20px 6%;
	.boxLeft {
		width: 150px;
		
	}
	
} 
.contTop{
	.boxLeft {
		max-width: 140px;
	}
	}	

	.pcbr br {
	display: block;
}

	
/* ==========================================================================
  イベント情報
   ========================================================================== */
	.title_event {
		display: none;
	}
	.title_eventSP {
		display: block;
		background:url(../event/images/title_eventSP.svg) no-repeat;
	}
	.eventBox {
		margin: 30px 0;
		
	}
	.box_01 {
		.boxLeft {
			margin-right: 20px;
			width: 150px;
		}
		
		
	}
	.box_02 {
		.boxRight {
			margin-left: 20px;
			width: 150px;
					
		
		}

	}

	.contIntr {
		font-size: 14px;
	}
/* ==========================================================================
  キット購入方法
   ========================================================================== */
		.title_kit {
			display: none;
	}
	.title_kitSP {
	display: block;
		background: url(../kit/images/title_kitSP.svg) no-repeat;
	}

.fancybox-close {
	background: url(../kit/images/fancybox.png);
	max-height: 40px;
	max-width: 40px;
	}
/* ==========================================================================
  参加方法&遊び方
   ========================================================================== */
	
			.title_howto {
			display: none;
	}
	.title_howtoSP {
	display: block;
		background: url(../howto/images/title_howtoSP.svg) no-repeat;
	}

	.must {
		.imageH {
			width: 80%;
			margin: 0 auto;
			
		}
	}
	.with{
	h5{
		width: 120px;
	 }
	 p {
		 overflow: hidden;
	 }
	 li{
	 }
	}
  
  
/* ==========================================================================
  注意事項・FAQ
   ========================================================================== */
 
			.title_faq {
			display: none;
	}
	.title_faqSP {
	display: block;
		background: url(../faq/images/title_faqSP.svg) no-repeat;
	}

	.answer {
	font-size: 14px;
}
.faqLink ul li:first-child {
    border-left:none;
}
.faqLink ul li:last-child {
	    border-right:none;
	}
/* ==========================================================================
  過去の公演の様子
   ========================================================================== */
			.title_kako {
			display: none;
	}
	.title_kakoSP {
	display: block;
		background: url(../kako/images/title_kakoSP.svg) no-repeat;
	}
	
	.youtube {
	max-width: 520px;
	margin: 20px auto 40px;
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;

}
	.kako_mgn {
		margin-top: 40px;
	}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* ==========================================================================
  練習問題に挑戦
   ========================================================================== */
			.title_renshu {
			display: none;
	}
	.title_renshuSP {
	display: block;
		background: url(../renshu/images/title_renshuSP.svg) no-repeat;
	}
	.renshu .bannerList li {
		    max-width: 48%;
	}
	.resultBox {
	.boxLeft {
		max-width: 100px;
		}
	}
.shareBox {
		.hstag {
	right: 0;
			max-width: 80px;
			top: 35px;
		}
	.whiteTitle {
    max-width: 115px;
    margin: 0 auto;
	}
	.shareTxt {
		font-size: 14px;
	}
	}
	
	
/* ==========================================================================
  お問い合わせ
   ========================================================================== */
			.title_contact {
			display: none;
	}
	.title_contactSP {
	display: block;
		background: url(../contact/images/title_contactSP.svg) no-repeat;
	}

	.imgSizeSP {
		max-width: 40%;
		margin-left: auto;
		margin-right: auto;
	
}

/* ==========================================================================
  スペシャル
   ========================================================================== */
.title_special {
			display: none;
	}

.title_specialSP {
    display: block;
    background: url(../special/images/title_specialSP.svg) no-repeat;
}
	#sp_01 {
		.bannerList {
			padding: 0 6%;
			
		}
	}
	.sp_botton {
		max-width: 50%;

	}
	
	
.ginza_nazo {
	.nazo_namber {
	}
	li {
		.answerArea {
			input {
				width: 90%;
				
			}
			button {
				
			}
		}
	}
}

	.modal_currect , .modal_currect2 , .modal_currect3 , .modal_currect4 , .modal_currect5 , .modal_currect6 , .modal_currect7 , .modal_currect8 , .modal_currect9 , .modal_currect10 ,  .modal_currect_irhs1 , .modal_currect_irhs2 , .modal_currect_tric {
		width: 75%;
		top: 2%;
		.resultBox {
			margin: 10px 0;
			.caption_s_L {
				font-size: 11px;
				margin: 5px 0 0 0;
			}
		}
		.shareBox {
			.shareTxt {
				margin: 0;
			}
		}
			.ginza_correct {
				max-width: 120px;
				margin: 0 auto;
	}
	}
	.modal_incurrect {
		width: 75%;
		
	}



	/* ==========================================================================
  ANSWER
   ========================================================================== */
	#answer {
		.boxLeft {
		width: 100px;
	}
		.contIntr {
			font-size: 13px;
		}
	}

/* ==========================================================================
  ヒントページ
   ========================================================================== */
			.title_hint {
			display: none;
	}
	.title_hintSP {
	display: block;
		background: url(../hint/images/title_hintSP.svg) no-repeat;
	}

	.hint__wrap {
		li {
			.hint__color {
			width: 48%;
			}
			.red {
				float: right;
			}
			.hint__color__blue {
			width: 48%;
		    margin: 0 auto;
			}
			.hint__abc {
			width: 48%;
				&:nth-child(even) {
					float: right;
				}
			}
			.btn__center {
				margin: 0 auto;
				width: 48%;
			}
		}
	}

	/* ==========================================================================
ANSWER
   ========================================================================== */
			.title_answer {
			display: none;
	}
	.title_answerSP {
	display: block;
		background: url(../answer/images/title_answerSP.svg) no-repeat;
	}

	
	.btn_answer_hint {
	}
	
/* ==========================================================================
 エンディング
 ========================================================================== */
	.ending {
		.ending__staff {
		background-position: 70% center;
	}
		
		.shareBox {
			.shareTxt {
			font-size: 27px;
			}
			.shareSNS {
				max-width: 560px;
				li {
					width: 90px;
				}
			}
		}
		.ending__copy {
			font-size: 21px;
		}
}	
	
/* ==========================================================================
アンケート
 ========================================================================== */	
	.nazo {
		.ending__copy {
			font-size: 10px;
		}
	}

	
	/* ==========================================================================
  English
   ========================================================================== */
	
	.en {
			.mainVisual_wrap {
		height: 560px;
	}

	}
	.english_answer  {
		.page_container {
			margin-top: 80px;
		}
	}
	.english_answer {
	.f-img {
		width: 48%;
	}
}

	
}