*{line-height:1.61; }
.box{margin: 10px auto; max-width: 976px;}
.box img{width: 100%;}
.pc-box{display: block;}
.sf-box{display: none;}

.text_box{width: 95%; margin: 0 auto;}

.btn-box{ width: 95%; margin: 0 auto; padding: 2.5% 0 0 0;}
.btn-box li{ width: 48%; float: left; padding: 1%;}
.btn-box img{width: 100%;}
.btn-box li:hover{filter:alpha(opacity=65); -moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}

.text-btn-box a{width: calc(80% - 10px); max-width: 400px; margin: 0 auto; padding: 5px 3% 10px 3%; display: block; text-align: center; color #fff;
border-radius: 0 0 30px 30px; -webkit-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px;
 background:#6c3c97; font-size:18px; line-height: 1.2; border: solid 5px #bd9a25; border-top: none; color: #eeb7c4;
}
.text-btn-box a:hover{background:#000;}

.election .brnelection img{border: solid 3px #ffff00; margin:-3px;}

.chara_box1{ background:url(/haruka6/gentourondo/images/special/cp/20161201/chara_bg_pc.jpg) top center no-repeat #000; padding: 0 0 0 0; -moz-background-size:100% auto; background-size:100% auto; margin-top: 40px;}
.chara_box2{ background:url(/haruka6/gentourondo/images/special/cp/20161201/chara_bg_pc2.jpg) top center no-repeat #000; padding: 0 0 0 0; -moz-background-size:100% auto; background-size:100% auto; margin-top: 40px;}
.chara_box3{ background:url(/haruka6/gentourondo/images/special/cp/20161201/chara_bg_pc3.jpg) top center no-repeat #000; padding: 0 0 0 0; -moz-background-size:100% auto; background-size:100% auto; margin-top: 40px;}
.chara_box4{ background:url(/haruka6/gentourondo/images/special/cp/20161201/chara_bg_pc4.jpg) top center no-repeat #000; padding: 0 0 0 0; -moz-background-size:100% auto; background-size:100% auto; margin-top: 40px;}
.chara_box5{ background:url(/haruka6/gentourondo/images/special/cp/20161201/chara_bg_pc5.jpg) top center no-repeat #000; padding: 0 0 0 0; -moz-background-size:100% auto; background-size:100% auto; margin-top: 40px;}
.chara_box6{ background:url(/haruka6/gentourondo/images/special/cp/20161201/chara_bg_pc6.jpg) top center no-repeat #000; padding: 0 0 0 0; -moz-background-size:100% auto; background-size:100% auto; margin-top: 40px;}
.chara_box7{ background:url(/haruka6/gentourondo/images/special/cp/20161201/chara_bg_pc7.jpg) top center no-repeat #000; padding: 0 0 0 0; -moz-background-size:100% auto; background-size:100% auto; margin-top: 40px;}
.chara_box8{ background:url(/haruka6/gentourondo/images/special/cp/20161201/chara_bg_pc8.jpg) top center no-repeat #000; padding: 0 0 0 0; -moz-background-size:100% auto; background-size:100% auto; margin-top: 40px;}

.chara_data{float: right; width: 75%;}

.chara1_img{background:url(/haruka6/gentourondo/images/special/cp/20161201/img_ss1a.png) center left no-repeat;}
.chara2_img{background:url(/haruka6/gentourondo/images/special/cp/20161201/img_ss2a.png) top left no-repeat;}
.chara3_img{background:url(/haruka6/gentourondo/images/special/cp/20161201/img_ss3a.png) top left no-repeat;}
.chara4_img{background:url(/haruka6/gentourondo/images/special/cp/20161201/img_ss4a.png) top left no-repeat;}
.chara5_img{background:url(/haruka6/gentourondo/images/special/cp/20161201/img_ss5a.png) top left no-repeat;}
.chara6_img{background:url(/haruka6/gentourondo/images/special/cp/20161201/img_ss6a.png) top left no-repeat;}
.chara7_img{background:url(/haruka6/gentourondo/images/special/cp/20161201/img_ss7a.png) top left no-repeat;}
.chara8_img{background:url(/haruka6/gentourondo/images/special/cp/20161201/img_ss8a.png) top left no-repeat;}

.cmngs{width: 95%; margin: 0 auto; text-align: center; font-size: 20px; padding: 20px 0; color:#f9e783;}

.marker{
background: linear-gradient(transparent 95%, #df5772 95%);
color:#df5772;

}
.marker a{color:#df5772;}

.chara_name{
	width: 50%;
	font-size: 47.123px;
	text-align: center;
	margin: 0 auto;
	max-width: 359px;
	background:url(/haruka6/gentourondo/images/special/cp/20161201/title.png) top center no-repeat;
	-moz-background-size:100% 100%; background-size:100% 100%;
}

.chara_text{font-size:21px; width: 68%; text-shadow: 0 0 0 #fff, -1px 0 1px #fff, 1px 0 1px #fff; padding: 24px 0 10px 18%; color: #503674; min-height: 100px; font-feature-settings : "palt";}
.chara_movie{width: 93%; max-width: 556px; float: right; margin-right: 8%; padding-bottom: 30px;}
.user_voice{padding: 0 2.5% 0x 2.5%;  width: calc(100% - 10px); height:auto; border-left:5px solid #b4931b; border-right:5px solid #cea637; border-top: solid 5px #b4931b; border-bottom: solid 5px #b4931b;}






.user_voice_title{font-size: 24px; color: #fff; font-weight: bold; padding: 8px 8px 8px 0; width: 94%; margin: 0 auto;}
.user_voice ul{ padding: 0 8px 16px 8px; list-style-image: url(/haruka6/gentourondo/images/special/cp/20161201/li-icon.png); margin:0; width: 90%; margin: 0 auto; font-family: 'arial unicode ms', Meiryo, メイリオ, sans-serif;}
.user_voice ul li{padding:0; margin:0;}

.user_voice_in_all{width: 95%; max-width: 950px; margin: 0 auto; padding-bottom: 10px; color: #e9ddf2; border-top: solid 1px #e9ddf2; padding-top: 10px;}


#panel-1 .user_voice{ background: #6c3c97;}
#panel-2 .user_voice{ background: #6c3c97;}
#panel-3 .user_voice{ background: #6c3c97;}
#panel-4 .user_voice{ background: #6c3c97;}
#panel-5 .user_voice{ background: #6c3c97;}
#panel-6 .user_voice{ background: #6c3c97;}
#panel-7 .user_voice{ background: #6c3c97;}
#panel-8 .user_voice{ background: #6c3c97;}






@media screen and (max-width: 1000px) {
.chara_name{font-size:5.075vw;}
}


@media screen and (max-width: 900px) {
.chara_text{font-size:21px; width: 60%; text-shadow: 0 0 0 #fff, -1px 0 1px #fff, 1px 0 1px #fff; padding: 10px 0 20px 20%; }

.chara1_img{background-position: 0 0; -moz-background-size:100% auto; background-size:100% auto;}
.chara2_img{background-position: 0 0; -moz-background-size:100% auto; background-size:100% auto;}
.chara3_img{background-position: 20px 0; -moz-background-size:100% auto; background-size:100% auto;}
.chara4_img{background-position: 20px 0; -moz-background-size:100% auto; background-size:100% auto;}
.chara5_img{background-position: 20px 0; -moz-background-size:100% auto; background-size:100% auto;}
.chara6_img{background-position: 10px 0; -moz-background-size:100% auto; background-size:100% auto;}
.chara7_img{background-position: 20px 0; -moz-background-size:100% auto; background-size:100% auto;}
.chara8_img{background-position: 0 0; -moz-background-size:100% auto; background-size:100% auto;}

.chara_movie{ max-width: 400px; }

}


@media screen and (max-width: 750px) {
.chara_text{font-size:21px; width: 60%; text-shadow: 0 0 0 #fff, -1px 0 1px #fff, 1px 0 1px #fff; padding: 10px 0 20px 20%; }

.chara1_img{background-position: -50px -30px; -moz-background-size:150% auto; background-size:150% auto;}
.chara2_img{background-position: -100px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara3_img{background-position: -50px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara4_img{background-position: -50px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara5_img{background-position: -70px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara6_img{background-position: -10px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara7_img{background-position: -50px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara8_img{background-position: -50px 0; -moz-background-size:150% auto; background-size:150% auto;}

.chara_movie{ max-width: 400px; }

}

@media screen and (max-width: 640px) {
.pc-box{display: none;}
.sf-box{display: block;}
.chara_text{width: 60%; font-size:3.150vw; padding: 5px 2% 5px 5%; background-color:rgba(0,0,0,0.65); margin-left: 26%; margin-top: 5px; color: #fff; text-shadow: 0 0 0 #000, -1px 0 1px #000, 1px 0 1px #000;}
.chara_movie{ max-width: 350px; }

.btn-box li{ width: 98%; float: none; padding: 1%;}

.user_voice ul{width: 80%; margin: 0 auto;}
.user_voice_title{width: 86%; margin: 0 auto;}

.chara1_img{background-position: bottom left; -moz-background-size:150% auto; background-size:150% auto;}
.chara2_img{background-position: bottom left; -moz-background-size:150% auto; background-size:150% auto;}
.chara3_img{background-position: bottom left; -moz-background-size:150% auto; background-size:150% auto;}
.chara4_img{background-position: bottom left; -moz-background-size:150% auto; background-size:150% auto;}
.chara5_img{background-position: bottom left; -moz-background-size:150% auto; background-size:150% auto;}
.chara6_img{background-position: bottom left; -moz-background-size:150% auto; background-size:150% auto;}
.chara7_img{background-position: bottom left; -moz-background-size:150% auto; background-size:150% auto;}
.chara8_img{background-position: bottom left; -moz-background-size:150% auto; background-size:150% auto;}

.text-btn-box a{font-size:4.150vw; padding: 5px 3% 10px 3%;}


.cmngs{font-size:4.150vw;}


}
/* list_tad
============================================================================  */
@media all and (max-width: 640px) {
ul#tabs-list {
  /* list-style: none;
  text-align: center;
  border-bottom: 1px solid #dfdfdf;
   */
  margin: 0 auto;
  padding: 0;
   width: 95%;
   height: auto;
   border: solid 1px #fff0;
}
ul#tabs-list li{
  width: 12.5%;
  max-width: 160px;
  float: left;
}

label.panel-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  width: 100%;

}
label.panel-label:hover {
-webkit-filter: sepia(0%); filter: sepia(0%);
}

.chara1btn{ width: 100%; background:url(/haruka6/gentourondo/images/special/cp/20161201/btnchara1b.jpg) top left no-repeat; padding-top: 100%; -moz-background-size:contain; background-size:contain; -webkit-filter: sepia(100%); filter: sepia(100%);}
.chara2btn{ width: 100%; background:url(/haruka6/gentourondo/images/special/cp/20161201/btnchara2b.jpg) top left no-repeat; padding-top: 100%; -moz-background-size:contain; background-size:contain; -webkit-filter: sepia(100%); filter: sepia(100%);}
.chara3btn{ width: 100%; background:url(/haruka6/gentourondo/images/special/cp/20161201/btnchara3b.jpg) top left no-repeat; padding-top: 100%; -moz-background-size:contain; background-size:contain; -webkit-filter: sepia(100%); filter: sepia(100%);}
.chara4btn{ width: 100%; background:url(/haruka6/gentourondo/images/special/cp/20161201/btnchara4b.jpg) top left no-repeat; padding-top: 100%; -moz-background-size:contain; background-size:contain; -webkit-filter: sepia(100%); filter: sepia(100%);}
.chara5btn{ width: 100%; background:url(/haruka6/gentourondo/images/special/cp/20161201/btnchara5b.jpg) top left no-repeat; padding-top: 100%; -moz-background-size:contain; background-size:contain; -webkit-filter: sepia(100%); filter: sepia(100%);}
.chara6btn{ width: 100%; background:url(/haruka6/gentourondo/images/special/cp/20161201/btnchara6b.jpg) top left no-repeat; padding-top: 100%; -moz-background-size:contain; background-size:contain; -webkit-filter: sepia(100%); filter: sepia(100%);}
.chara7btn{ width: 100%; background:url(/haruka6/gentourondo/images/special/cp/20161201/btnchara7b.jpg) top left no-repeat; padding-top: 100%; -moz-background-size:contain; background-size:contain; -webkit-filter: sepia(100%); filter: sepia(100%);}
.chara8btn{ width: 100%; background:url(/haruka6/gentourondo/images/special/cp/20161201/btnchara8b.jpg) top left no-repeat; padding-top: 100%; -moz-background-size:contain; background-size:contain; -webkit-filter: sepia(100%); filter: sepia(100%);}




#panels .container {}
#panels section header label.panel-label {
  /* padding: 12px 24px; */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


#panels section main { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-height: 0; opacity: 0; -webkit-transition: opacity 600ms; transition: opacity 600ms; overflow-y: hidden;}
#panel-1-ctrl:checked ~ #panels #panel-1 main { max-height: initial; opacity: 1;}
#panel-2-ctrl:checked ~ #panels #panel-2 main { max-height: initial; opacity: 1;}
#panel-3-ctrl:checked ~ #panels #panel-3 main { max-height: initial; opacity: 1;}
#panel-4-ctrl:checked ~ #panels #panel-4 main { max-height: initial; opacity: 1;}
#panel-5-ctrl:checked ~ #panels #panel-5 main { max-height: initial; opacity: 1;}
#panel-5-ctrl:checked ~ #panels #panel-5 main { max-height: initial; opacity: 1;}
#panel-6-ctrl:checked ~ #panels #panel-6 main { max-height: initial; opacity: 1;}
#panel-7-ctrl:checked ~ #panels #panel-7 main { max-height: initial; opacity: 1;}
#panel-8-ctrl:checked ~ #panels #panel-8 main { max-height: initial; opacity: 1;}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 { max-height: 160px; opacity: 1; }
#nav-ctrl:checked ~ #tabs-list #li-for-panel-2 { max-height: 160px; opacity: 1; }
#nav-ctrl:checked ~ #tabs-list #li-for-panel-3 { max-height: 160px; opacity: 1; }
#nav-ctrl:checked ~ #tabs-list #li-for-panel-4 { max-height: 160px; opacity: 1; }
#nav-ctrl:checked ~ #tabs-list #li-for-panel-5 { max-height: 160px; opacity: 1; }
#nav-ctrl:checked ~ #tabs-list #li-for-panel-6 { max-height: 160px; opacity: 1; }
#nav-ctrl:checked ~ #tabs-list #li-for-panel-7 { max-height: 160px; opacity: 1; }
#nav-ctrl:checked ~ #tabs-list #li-for-panel-8 { max-height: 160px; opacity: 1; }

#open-nav-label { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#nav-ctrl:checked ~ #tabs-list #open-nav-label { display: none; }
#close-nav-label { display: block; max-height: 0; overflow-y: hidden; background-color: #444444; color: #ecf0f1; padding: 0px; -webkit-transition: max-height 200ms; transition: max-height 200ms; cursor: pointer; text-transform: uppercase; font-size: 12px; line-height: 22px; letter-spacing: 1px; }
#tabs-list { position: relative; }
#tabs-list label.panel-label { /* padding: 12px 0; */ }


#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 { max-height: 160px; opacity: 1; }
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label { -webkit-filter: sepia(0%); filter: sepia(0%); }
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 { max-height: 160px; opacity: 1; }
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label { -webkit-filter: sepia(0%); filter: sepia(0%); }
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 { max-height: 160px; opacity: 1; }
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label { -webkit-filter: sepia(0%); filter: sepia(0%); }
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 { max-height: 160px; opacity: 1; }
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label { -webkit-filter: sepia(0%); filter: sepia(0%);}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 { max-height: 160px; opacity: 1; }
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label { -webkit-filter: sepia(0%); filter: sepia(0%); }

#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6 { max-height: 160px; opacity: 1; }
#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6 label.panel-label { -webkit-filter: sepia(0%); filter: sepia(0%); }

#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7 { max-height: 160px; opacity: 1; }
#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7 label.panel-label { -webkit-filter: sepia(0%); filter: sepia(0%); }

#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8 { max-height: 160px; opacity: 1; }
#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8 label.panel-label { -webkit-filter: sepia(0%); filter: sepia(0%); }

#panels .container { width: 100%; }
#panels section header { display: block; }

.chara1_img{background-position: -30px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara2_img{background-position: -60px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara3_img{background-position: -50px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara4_img{background-position: -20px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara5_img{background-position: -25px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara6_img{background-position: -10px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara7_img{background-position: -00px 0; -moz-background-size:150% auto; background-size:150% auto;}
.chara8_img{background-position: -40px 0; -moz-background-size:150% auto; background-size:150% auto;}


}



@media screen and (max-width: 400px) {
.user_voice ul{width: 75%; margin: 0 auto;}
.user_voice_title{width: 83%; margin: 0 auto;}

ul#tabs-list li{
  width: 25%;
  max-width: 160px;
  float: left;
}

.chara1_img{background-position: -10% 0; -moz-background-size:200% auto; background-size:200% auto;}
.chara2_img{background-position: -5% 0; -moz-background-size:200% auto; background-size:200% auto;}
.chara3_img{background-position: -10% 0; -moz-background-size:200% auto; background-size:200% auto;}
.chara4_img{background-position: -9.5% 0; -moz-background-size:200% auto; background-size:200% auto;}
.chara5_img{background-position: -10% 0; -moz-background-size:200% auto; background-size:200% auto;}
.chara6_img{background-position: -15% 0; -moz-background-size:200% auto; background-size:200% auto;}
.chara7_img{background-position: -10% 0; -moz-background-size:200% auto; background-size:200% auto;}
.chara8_img{background-position: -10% 0; -moz-background-size:200% auto; background-size:200% auto;}

.chara_data{float: none; width: 100%; padding: 0; padding:50% 0 0 0;}
.chara_text{
	width: 95%;
	max-width: 400px;
	 font-size:4.150vw;
	 padding: 5px 2.5%;
	 background-color:rgba(0,0,0,0.65);
	 margin-left: 0;
	 margin-top: 5px;
	 float: none;
	 min-height: auto;
}
.chara_movie{width: 95%; max-width: 556px; float: none; margin: 0 auto 10px auto; padding-bottom: 0;}
.chara_name{font-size:5.100vw; padding-top: 3px;}
}