.brave h2{ 
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
text-indent: -9999px;
margin: 0 auto;
}

.readArea div { margin-bottom: 25px;}
/*body.brave article h3{ color: #0189aa; padding: 12px; text-align: center; font-size: 1.1em; background-image: url(../img/bg_line.png); min-height: 40px;}*/

.example {
border-radius: 30px; 
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
background: #fffefb;
padding: 15px 20px;
font-weight: bold;
color: #972d03;
display: inline-block;
border: solid 1px #dd824b;
}
.present { background: #fffae3;
border-radius: 10px; 
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.present span { color:#03b193;}
.present span.line { color:#fff; background:#24bea3; padding: 0.1em;
border-radius: 4px; 
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.readArea div p { padding: 0.2em 0;}

article .txt {
    line-height: 1.6em;
    padding: 0 10px 1em;
    margin-bottom: 30px;
}
p.btn a {
  display: block;
  border-radius: 30px;
  background-color: #5bc5de;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/brave/btn_apply.png);
background-size: contain;
text-indent: -9999px;
margin: 0 auto;
}
p.btn a:hover {background-color: #89d5e7;}

@media all and (min-width: 768px) {
.brave h2{ width:940px; height:250px; padding-bottom: 0;/* background-image: url(../img/brave/title.jpg);*/ background-image: url(../img/brave/title_result.jpg);}
.readArea { font-size:1.1em; line-height: 2.0em; text-align: center; padding: 30px 0;}
.readArea span { font-size:1.3em; font-weight: bold;}
.readArea div { margin-bottom: 30px;}
.present {padding: 25px 10px;}
p.btn a {
width: 350px;
height: 60px;
}
}
@media all and (max-width: 767px) {
.brave #contents { padding-top: 1px;}
.brave h2{ width:100%; height:0; padding-top: 32.467%; padding-bottom: 0;
/*background-image: url(../img/brave/sp_title.jpg);*/
background-image: url(../img/brave/sp_title_result.jpg);
-webkit-border-top-left-radius: 30px;  
    -webkit-border-top-right-radius: 30px;  
    -moz-border-radius-topleft: 30px;  
    -moz-border-radius-topright: 30px;  }
.readArea { font-size:1.0em; line-height: 1.6em; text-align: center; padding: 1em 0;}
.readArea span { font-size:1.1em; font-weight: bold;}
.readArea div { margin-bottom: 20px;}
.readArea div p { padding: 0.3em 0; line-height: 1.4em;}
.example {
border-radius: 10px; 
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
	}
.present {padding: 10px 10px;}
	
/*p.btn a {
width: 90%;
height: 0;
padding-top: 15%
}*/
article .txt {
    margin-bottom: 20px;
}
}

.resultArea {}

.resultArea .box {
border-radius: 15px; 
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
margin: 0 auto 30px;
}
.resultArea .box.prize01 {
background: #fff7e3;
}
.resultArea .box.prize02 {
border: solid 2px #aaeee3;
}
.resultArea .box.prize03 {
border: solid 2px #dadefe;
}
.prize01 .prize h3 {background-image: url(../img/brave/icon_prize01.png); background-position:top center; background-repeat: no-repeat; text-indent: -9999px; height: 120px;}
.prize02 .prize h3 {background-image: url(../img/brave/icon_prize02.png); background-position:top center; background-repeat: no-repeat; text-indent: -9999px; height: 110px;}
.prize03 .prize h3 {background-image: url(../img/brave/icon_prize03.png); background-position:top center; background-repeat: no-repeat; text-indent: -9999px; height: 110px;}
.prize p{ padding: 10px; text-align: center; font-size: 0.9em; line-height: 1.4em;}
.prize p span{color: #30a3be; display: block;}
.winner {background-image: url(../img/brave/line.png); background-position: bottom; background-repeat: no-repeat; padding-bottom: 20px;}
.episodeArea .name{font-size: 1.3em; font-weight: bold;}
.episodeArea .btn{}


.episodeArea .btn a {
  display: block;
  border-radius: 18px;
  background-color: #fff;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/brave/btn_episode.png);
background-size: contain;
border: solid 2px #5bc5de;
text-indent: -9999px;
width:286px; height: 40px;
}
.episodeArea .btn a:hover {background-color: #e0f8fe;}

.episodeArea .comment { padding:5px;}
.episodeArea .comment h4 {color:#d84f8f; font-size:1.2em; padding: 15px 0;}
.episodeArea .comment p { line-height: 1.5em;}

body.brave .txtArea h3{ color: #0189aa; padding: 10px; font-size: 1.2em;}

@media all and (min-width: 768px) {
.resultArea .box {
width:930px; padding: 20px 0;
}
.prize{ display: inline-block; vertical-align: top; width:240px; padding: 0 5px;}
.episodeArea { display: inline-block; vertical-align: top; width:660px;}
.episodeArea .name{ display: inline-block; vertical-align:middle; width: 340px; padding: 0 5px;}
.episodeArea .btn{ display: inline-block; vertical-align:middle; }
}

@media all and (max-width: 767px) {
.resultArea .box {
padding: 20px;
}
.prize01 .prize h3 { background-size: contain; height: 90px;}
.prize02 .prize h3, .prize03 .prize h3 { background-size: contain; height: 80px;}
.episodeArea .name { text-align: center; padding-bottom: 15px;}
.episodeArea .btn a {
width:95%; max-width: 280px; height: 40px; margin: 0 auto;
}
.episodeArea .comment h4 { font-size:1.1em; }
}


/*popup*/
#episode_dt {
  text-align: left;
  /*border:4px solid #fff;*/
  background-color: #fff;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 center;
  background-size: auto, cover;
  margin: 1em;
}

#episode_dt #mainbox {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

#episode_dt {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 5800 !important;
    bottom: 0;
    /* left: 0; */
    right: 0;
    margin: auto;
}

#episode_dt .winnerName{font-size: 1.2em; font-weight: bold; padding: 5px 10px 10px; color:#d84f8f;}

#episode_dt .btn-w-close a {
  display: block;
  width: 150px;
  height: 40px;
  background: url(../img/chart/close.png) no-repeat;
  margin: 0 auto;
  background-size: contain;
}

#episode_dt .btn-w-close a {
  cursor: pointer;
}
#episode_dt .txtArea .txt {background-image: url(../img/character/bg_line_chara.png); font-size: 0.9em; line-height: 2.1em!important; padding: 0 10px 1em;}

@media all and (min-width: 768px) {
  #episode_dt {
    width: 750px;
    height: 455px;
    margin-left: -350px;
	box-shadow: 8px 8px #237d93;
  }
  

  #episode_dt .btn-w-close {
    position: absolute;
    right: 4%;
    bottom: 5%;
  }
	
	

	div.episode {
		padding: 0px 0px; position: relative;
	}
	.brave div.episode {
		padding: 0px 0px 0px;
		background-color: white;
	}
#episode_dt .txtArea { padding: 20px; height: 350px; overflow-y: scroll;}
}

@media all and (max-width: 767px) {
  #episode_dt {
    width: 100%;
    margin: 10px -50% 0; padding-top: 10px;
  }

  #episode_dt .btn-w-close a {
    margin: 3.5% auto 5%;
  }
div.episode {
		padding: 0;
		margin: 0;
	}
#episode_dt .txtArea { padding: 1em; }
.data { width:100%; height: 0; padding-top: 13.3333%; background-size: cover; }

}