@charset "utf-8";
html,body{
	margin:0;
}
.q_cWrapper{
	width:auto;
	//max-width:650px !important;
	//max-width:700px;
	margin:0 auto;
}
.question{
	text-align:center;
	font-size:45px;
	//max-width:650px;
	//margin-right:auto;
	//margin-left:auto;
	//margin-top:120px;
	//margin-bottom:90px;
}
div.question > p{
	font-size:25px;
}
.choicesWrapper{
	text-align:center;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	//max-width:650px;
	//margin:0 auto;
}
div[class="answer"]{
	text-align:left;
	display:flex;
	flex-wrap:wrap;
	justify-content:left;
}
.choicesWrapper p{
	//margin:0;
	letter-spacing:3px;
}
.choices{
	position:relative;
	//display: inline-block;
	//vertical-align: top;
	border:solid 3px #fdb400;
	width:30%;
	height:200px;
	margin-bottom:20px;
	padding: 12px;
	border-radius: 25px;
    	box-sizing: border-box;
}
div.choices2{
	margin:0 20px;
}
div.choices5{
	margin:0 20px;
}
div.choices8{
	margin:0 20px;
}
div.choices10{
	margin:0 20px;
}
div.choices12{
	margin:0 20px;
}
div.choices15{
    	margin: 0 20px;
}
div.choices17{
	margin-right:20px;
}
@media screen and (max-width:768px){
	div.choices2{
		margin:0 0 20px 0;
		
	}
}
.choices button {
    color: #fff;
    font-size: 20px;
    background-color: #009903;
    width: 50%;
    height: 40px;
    position: absolute;
    top: 70%;
    left: 26%;
    border-radius: 8px;
}
.recommend{
	margin-top:20px;
	font-size:15px;
	margin-bottom:70px;
}
.answer{
	//margin:0 auto;
	text-align:left;
	//width:calc(300px * 3 + 20px);
	max-width:700px;
	min-width:500px;
	//border:solid 1px #0000ff;
	//padding:30px;
}
.answer p{
	color: #432307;
    	box-sizing: border-box;
    	margin: 0 0 20px;
    	padding: 0 0 2px 5px;
    	//border-bottom: 1px solid;
    	//width:600px;
}
.delete{
	display:none;
}
a{
	text-decoration: none;
	color:#00bfff;
}
a:hover{
	opacity:0.5;
}
/******ここから回答のデザインのcss******/
.answerWrapper {
    max-width: 650px;
    //float: left;
    margin-left:40px;
}

.right > p {
    margin: 0;
}



.answer h3 {
    padding: 5px 0 5px 10px;
    margin-bottom: 15px;
    background-color: #432307;
    color: #fff;
    border-radius: 5px 5px 0 0;
}

.answerWrapper h3:before {
    content: "";
    border-left: 2px solid #fff;
    height: 15px;
    margin-right: 5px;
}

.acc > h4 {
    color: #432307;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 0 0 2px 5px;
    border-bottom: 1px solid;
}
.date {
    overflow: hidden;
}

.date > .imgBox {
    width: 30%;
    height: 200px;
    float: left;
    position: relative;
}

.date > .imgBox img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.date .right {
    width: 65%;
    float: right;
}

.date .right > div {
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 10px;
    color: #fff;
}

.date .right > div:before {
    font-family: "fontAwesome";
    margin: 0 1px;
}

.date .right > .type1 {
    background-color: #b8d34f;
}

.date .right > .type2 {
    background-color: #4fb1d3;
}

.date .right > .type3 {
    background-color: #d3ab4f;
}

.date .right > .type4 {
    background-color: #6e4fd3;
}

.date .right > .type5 {
    background-color: #4f6ed3;
}

.date .right > .type6 {
    background-color: #d34fa5;
}

.date .right > .type7 {
    background-color: #d3ab4f;
}

.date .right > .type8 {
    background-color: #286FBD;
}

.date .right > .type8:before {
    content: "\f001";
}

.date .right > .type9 {
    background-color: #286FBD;
}

.date .right > .type9:before {
    content: "\f130";
}

.date .right > .type10 {
    background-color: #E9847C;
}

.date .right > .type10:before {
    content: "\f0c4";
}

.date .right > .type11 {
    background-color: #E9847C;
}

.date .right > .type11:before {
    content: "\f005";
}

.date .right > .type12 {
    background-color: #E58D5F;
}

.date .right > .type12:before {
    content: "\f004";
}

.date .right > .type13 {
    background-color: #E7AB53;
}

.date .right > .type13:before {
    content: "\f1fc";
}

.date .right > .type14 {
    background-color: #CC497B;
}

.date .right > .type14:before {
    content: "\f040";
}

.date .right > .type15 {
    background-color: #7EAE64;
}

.date .right > .type16 {
    background-color: #b8d34f;
}

.date .right img {
    width: 15%;
    margin-bottom: 30px;
}

.dateNav {
    overflow: hidden;
    margin: 20px 0 30px;
}

.dateNav li {
    list-style-type: none;
    width: 32%;
    float: left;
    margin-left: 2%;
}

.dateNav li:first-child {
    margin-left: 0;
}

.dateNav li a {
    display: block;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    border-radius: 3px;
}

.dateNav li:nth-child(1) a {
    background-color: #afc168;
}

.dateNav li:nth-child(2) a {
    background-color: #5fb4af;
}

.dateNav li:nth-child(3) a {
    background-color: #f39800;
}

.site a {
    background-color: #e6ba14;
    border-radius: 5px;
    display: inline-block;
    padding: 7px 10px 6px;
    color: #fff !important;
    vertical-align: middle;
    text-decoration: none !important;
    font-size: 15px;
    margin: 0 10px 40px 0;
    float: left;
    box-shadow:1px 1px 0px 1px #ccc;
}

.site a:after {
    content: "\f08e";
    font-family: FontAwesome;
    font-size: 12px;
    margin-left: 3px;
}

.arrow {
    background-color: #fa8d2c;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    padding: 13px 30px 12px 10px;
    color: #fff;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    margin-bottom: 40px;
    cursor: pointer;
    box-shadow:1px 1px 0px 1px #ccc;
}

.arrow::before,
.arrow::after {
    position: absolute;
    content: "";
    vertical-align: middle;
}

.arrow::before {
    top: 20px;
    right: 6px;
    padding-left: 5px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 6px solid transparent;
    border-left: 10px solid #fff;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.on .arrow::before {
    top: 9px;
    right: 6px;
    padding-left: 5px;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 6px solid transparent;
    border-left: 10px solid #fff;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
div.buttonWrapper{
	width:131px;
	margin:0 auto;
}

button[value='back']{
	
    	width: 100%;
    	height: 50px;
    	border-radius: 5px;
    	background-color: #fdb400;
    	color: #fff;
	margin-top: 25px;
}
button[value='first']{
	display: inline-block;
    	width: 100%;
    	height: 50px;
    	border-radius: 5px;
    	background-color: #fdb400;
    	color: #fff;
	margin-top: 25px;
}
.buttonHide{
	display:none !important;
}
.buttonShow{
	display:inline-block !important;
}
p.seibetu{
	color: #ffffff;
	font-weight: bold;
	font-size: 100%;
	background: url(http://www.tokyo-stage.co.jp/images/dormitory/tit_bg_a4.gif) 0 0 no-repeat;
	padding: 5px 0 20px 10px;
	margin: 0;
	margin-top: 50px;

}

@media screen and (max-width:768px){
	
	div.question p{
		font-size:18px;
		
	}
	div.question{
		margin-top:60px !important;
		margin-bottom:50px !important;
		padding-right:5px !important;
		padding-left:5px !important;
	
	}
	div.choices{
		width:95%;
		height:165px;
	}
	div.question{
		width:100%;
	}
	div.answer{
		width:95%;
	}
	div.choicesWrapper{
		//margin:0 auto;
		width:100%;
	}
	div.choices button{
		height:45px;
		width:35%;
		left:33%;
		top: 65%;
		margin-top:5px;
	}
	div.recommend{
		font-size:18px;
	}
	div.choices15{
		margin:auto;
		margin-bottom:20px;
	}
	div.choices17{
		margin-right:0;
	}
	div.choices8{
		margin:auto;
		margin-bottom:20px;
	}
	div.choices5{
		margin:auto;
		margin-bottom:20px;
	}
	div.choices10{
		margin:auto;
		margin-bottom:20px;
	}
	div.choices12{
		margin:auto;
		margin-bottom:20px;
	}
	div.answerWrapper{
		width:100%;
		margin:0 auto;
	}
	div.answer {
	    text-align: left;
	    max-width: 100%;
	    min-width: 100%
	}
	
	button[value='first']{
		margin-bottom:10px;
	}
	
	
}