@charset "UTF-8";

/*---Landing---*/

#link_form{
	width:75%;
	max-width:500px;
	font-size:250%;
	font-weight:bold;
	text-align:center;
	display: block;
	margin:10% auto 2%;
	background-color:#ddd;
	padding: 2%;
	border:1px #900 solid;
	background-color:rgba(222,86,7,1);
	background:linear-gradient(to bottom,#bd4323,#d73a10);
	color:#FFF;
}

/*----form---*/
hr,
.title{
	display:none;
}

.group h3 {
    width: 100%;
    color: #f5efcc;
    background-image: linear-gradient(90deg, rgba(34, 118, 151, 1), rgba(34, 118, 151, 0.8) 52%, rgba(255, 255, 255, 0));
    padding: 0.5em 1em;
    margin-bottom: 1%;
    margin-top: 5%;
}

#lead{
	font-size:120%;
	text-align: center;
	width:90%;
	margin:0 auto;
	position:relative;
	z-index: 9;
}

#lead #lead_text{
	border-width:1px 0;
}
#lead b{
	color:#F00;
}
#lead #kikan{
	width:70%;
	max-width:21em;
	display:block;
	margin:2% auto 1%;
	border:solid 1px #ff5132;
	color:#ff5132;
	padding:1.5%;
	text-align:center;
}

#lead #start{
	font-size:200%;
	font-weight:bold;
	color:#A00;
	position:relative;
	text-align: center;
	line-height:0.8;
	margin:5% 0;
}
#lead #start span{
	font-size:50%;
	font-weight:normal;
}
#lead #start:after{
	content:"";
	display: block;
	width:0;height:0;
	border-width:20px 40px;
	border-color: #A00 transparent transparent;
	border-style: solid;
	position:absolute;
	bottom:-50px;
	left:50%;
	margin-left:-40px;
}




#form-info{
	width:100%;
	background-color:#CCC;
	color:#FFF;
	text-align:center;
	padding:6px 0;
	font-size:110%;
	font-weight:bold;
	margin-top:20px;
	border-radius:6px;
}


#characters{
	display:flex;
	flex-flow: row wrap;
}

#characters .go_float{
	width:13.2%;
	margin:0.5%;
	text-align:center;
	border:3px #227495 solid;
	background-color:#227495;
	border-radius:8px;
	overflow:hidden;
}

#characters .unchecked{opacity:0.75;}
#characters .checked{
	border-color:#f15409;
	background-color:rgba(222,86,7,1);
	opacity:1;
}

#characters .go_float img.chara_image{
	width:100%;
	display:block;
	padding-bottom: 5px;
}

#characters .go_float input{
	margin-left:-1.5em;
	display:none;
}

#characters .go_float span.series{
	display:block;
	font-size:70%;
}

#characters .go_float label{
	color:#fff;
	font-weight:normal;
	display:block;
}
#characters .go_float label img{
	pointer-events: none;
}

#characters .checked label{
	color:#FFF;
	font-weight:bold;
}

.option .text textarea {
    max-width: 100%;
    width: 100%;
    color: #111;
    padding: 1%;
	line-height: 1.3;
}

#btn_area{
	width:100%;
	margin:0 auto;
	text-align:center;
	margin:20px 0;
}

#btn_area input{
	width:45%;
	max-width:200px;
	font-size:120%;
	font-weight:bold;
	margin:0 1.5%;
	background-color:#ddd;
	padding: 2%;
	border:1px #900 solid;
}

#selected_chara{
	display:none;
}

#btn_area input{
    display: inline;
    width: 30%;
    height: auto;
    padding: 10px 0;
    background: url(/musou_abyss/assets/img/common/btn2-bg.jpg);
    color: #fff;
    cursor: pointer;
    text-shadow: 2px 2px 6px rgba(30, 70, 30, 0.8);
    font-size: 150%;
    border: solid 2px #f1e9c9;
	border-radius: 8px;
}

.question_title h4{display: none;}


#attention{
	font-size:80%;
	color:#b1b1b1;
	padding:40px 0;
	text-align: center;
}
#attention>div{text-indent:-1em;margin-left:1em;}
#alert{text-align: center;}


/*---確認画面---*/

body#body_id_confirm #lead{
	display: none;
}
body#body_id_confirm .go_float{
	width:99%;
	max-width:110px;
	margin:0 auto;
	height:auto;
}

body#body_id_confirm #present span.text{
	display: block;
	font-size:150%;
	background-color: #FFF;
	border-radius:8px;
	padding:1%;
}
body#body_id_confirm span.message{
	height:100px;
	overflow:auto;
}


/*---完了画面---*/

#body_id_error #alert{
	text-align:center;
	margin:30px auto;
	font-size:130%;
}


@media screen and (max-width:640px){
	body{font-size:3vw;}
	#characters .go_float{width:23.8%;}
	#characters .go_float span.series{display:none;}
	#lead{
		font-size:100%;
		text-align: left;
		width:99%;
	}

	#btn_area input{
		padding: 5% 2%;
	}
}