@charset "utf-8";
/* 2015/04/02 13:00 update*/

/* class for Count-UP 201504 cpn page /////////////////////////////////////////////////////////////////////// */
#dbz_cpn {background:#000000; color:#fff; margin-bottom:-20px; font-size:12px;}
#dbz_cpn h4 {color:#fff; font-size:18px;}
#dbz_cpn a {color:#e50012;}
#dbz_cpn a:hover {color:#e50012; text-decoration:underline;}

#dbz_cpn .banner {margin:0 0 20px 0;}
#dbz_cpn .copy {font-size:10px; text-align:center; padding-bottom:10px;}


#dbz_cpn .cpn .form-box {background:url(../img/cpn/dbz201504/form_bg.gif) repeat-y; margin:20px auto 30px auto; border:2px solid #ff7300; border-radius:8px; width:95%;}
#dbz_cpn .cpn .form-box .ribbon {color:#ffffff; text-align:center; text-shadow: 1px 1px 0 #000000; border-radius:5px 5px 0 0; border-bottom:1px solid #000000;  font-size:22px; padding:15px 0 18px 0; font-weight:bold; margin:0 0 15px 0;
background: rgb(255,145,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,145,0,1) 0%, rgba(255,115,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,145,0,1)), color-stop(100%,rgba(255,115,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,145,0,1) 0%,rgba(255,115,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,145,0,1) 0%,rgba(255,115,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,145,0,1) 0%,rgba(255,115,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,145,0,1) 0%,rgba(255,115,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9100', endColorstr='#ff7300',GradientType=0 ); /* IE6-9 */
}
#dbz_cpn .cpn .form-box .form_area{padding:20px; position:relative;}
#dbz_cpn .cpn .form-box .form_area .catch_txt{width:100%; text-align:center;margin:0;}
#dbz_cpn .cpn .form-box .form_area .input_area{width:100%; text-align:center; margin:0;}
#dbz_cpn .cpn .form-box .form_area .image_set{width:100%; position:relative;}
#dbz_cpn .cpn .form-box .form_area .image_set img{width:100%;}
#dbz_cpn .cpn .form-box .form_area .image_set .upper_stage{width:100%; margin:0 0 15px 0; display:block;}
#dbz_cpn .cpn .form-box .form_area .image_set .lower_stage{width:100%; margin:0 0 15px 0; display:block;}
#dbz_cpn .cpn .form-box .form_area .image_set li{float:left; display:block; width:25%; margin:0;}
#dbz_cpn .cpn .form-box .form_area .image_set li:last-child{float:left; display:block; width:25%; margin:0;}
#dbz_cpn .cpn .form-box .form_area .image_set .lower_stage li:first-child{float:left; display:block; width:25%; margin:0 0 0 70px;}
#dbz_cpn .cpn .form-box .form_area .image_set .d_ball{position:absolute; z-index:1;}
#dbz_cpn .cpn .form-box .form_area .animation_area{position:absolute; top:0; left:0; width:100%; height:440px; z-index:4000; text-align:center;}
#dbz_cpn .cpn .form-box .form_area .animation_db_ball{padding:200px 0;}
#dbz_cpn .cpn .form-box .input_txt{width:100%; margin:0 0 15px 0;}
#dbz_cpn .cpn .form-box .input_txt .txt_area{width:300px; color:#333;}
#dbz_cpn .cpn .form-box .submit_btn{margin:0 auto 15px auto;}
#dbz_cpn .cpn .form-box .submit_btn a{color:#FFFFFF; width:230px; font-size:18px; font-weight:bold;}
#dbz_cpn .cpn .form-box .submit_btn a:hover{color:#FFFFFF; text-decoration:none; width:230px; font-size:18px; font-weight:bold;}
#dbz_cpn .cpn .form-box .btn-complete{margin:0 auto 15px auto;}
#dbz_cpn .cpn .form-box .btn-complete a{background-color:#e50012 !important; color:#FFFFFF; width:230px; font-size:18px; font-weight:bold; border-color:#fff;}
#dbz_cpn .cpn .form-box .btn-complete a:hover{background-color:#ec4242 !important; border-color:#fff; color:#fff !important; text-decoration:none;}
#dbz_cpn .cpn .form-box .error_txt{color:#e50012; font-size:16px; font-weight:bold;text-align:center; margin:0 0 10px 0;}

#dbz_cpn .cpn .outline-box {border:#797979 2px solid; background-color:rgba(0,0,0,0.9); margin:0 auto 20px auto; padding-bottom:10px; width:95%;}
#dbz_cpn .cpn .outline-box h4{font-size:22px; width:100%; border-bottom:#797979 1px dotted; margin:0 0 8px 0; padding:0 0 3px 0; border-left: 0 solid #000000;}
#dbz_cpn .cpn .outline-box p{margin:0 0 20px 0;}
#dbz_cpn .cpn .outline-box .ribbon {color:#ffffff; text-align:center; text-shadow: 1px 1px 0 #000000; border-bottom:1px solid #000000;  font-size:22px; padding:15px 0 18px 0; font-weight:bold; margin:0;
background: rgb(182,182,182); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(182,182,182,1) 0%, rgba(63,63,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(182,182,182,1)), color-stop(100%,rgba(63,63,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(182,182,182,1) 0%,rgba(63,63,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(182,182,182,1) 0%,rgba(63,63,63,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(182,182,182,1) 0%,rgba(63,63,63,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(182,182,182,1) 0%,rgba(63,63,63,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6b6b6', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
}
#dbz_cpn .cpn .outline-box .outline_area{padding:20px;}
#dbz_cpn .cpn .outline-box .outline_area li{list-style:disc; margin:0 0 5px 15px; line-height:1.5;}

#dbz_cpn .cpn .prev_area{width:100%; margin:0; text-align:center;}
#dbz_cpn .cpn .prev_area .prev_btn{margin:0 auto;}
#dbz_cpn .cpn .prev_area .prev_btn a{color:#FFFFFF; width:350px; font-size:18px; font-weight:bold;}
#dbz_cpn .cpn .prev_area .prev_btn a:hover{color:#FFFFFF; text-decoration:none; width:350px; font-size:18px; font-weight:bold;}


/**デモ用（後で削除）**/
#sb-container{position:fixed; margin:0; padding:0; top:0; left:0; z-index:5000; text-align:left; visibility:hidden; display:none;}
#sb-overlay{position:relative; height:100%; width:100%;}
#sb-wrapper{position:absolute; visibility:hidden; z-index:9999; top:5%; left:50%; margin:0 0 0 -350px;}
#sb-wrapper .shenron_image{}
#sb-wrapper .shenron_image img{width:100%; max-width:720px;}
#sb-wrapper .btn_act{ -webkit-transition:all 0.3s; transition:all 0.3s;}
#sb-wrapper .btn_act:before,.btn_act:after{position: absolute; display: block; content:""; -webkit-transition:all 0.3s; transition:all 0.3s;}
#sb-wrapper .present_btn {width:425px; text-align:center; border:#800000 2px solid; position:absolute; top:650px; left:130px;}
#sb-wrapper .present_btn a{font-size:22px; text-shadow: 1px 1px 0 #000000; padding:15px 0; font-weight:bold; color:#ffffff; position: relative; display: block;text-decoration:none;
background: rgb(253,27,27); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(253,27,27,1) 5%, rgba(210,18,18,1) 5%, rgba(133,0,0,1) 50%, rgba(193,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,rgba(253,27,27,1)), color-stop(5%,rgba(210,18,18,1)), color-stop(50%,rgba(133,0,0,1)), color-stop(100%,rgba(193,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(253,27,27,1) 5%,rgba(210,18,18,1) 5%,rgba(133,0,0,1) 50%,rgba(193,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(253,27,27,1) 5%,rgba(210,18,18,1) 5%,rgba(133,0,0,1) 50%,rgba(193,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(253,27,27,1) 5%,rgba(210,18,18,1) 5%,rgba(133,0,0,1) 50%,rgba(193,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(253,27,27,1) 5%,rgba(210,18,18,1) 5%,rgba(133,0,0,1) 50%,rgba(193,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd1b1b', endColorstr='#c10000',GradientType=0 ); /* IE6-9 */
}
#sb-wrapper .present_btn:hover{box-shadow: 0px 0px 10px 3px #e60012; background-color:#9b000c; display:block;}
#sb-wrapper .present_btn a::before,
#sb-wrapper .present_btn a::after {position: absolute; top: 50%; right: 17px; display: block; content: ''; width: 16px; height: 4px; background-color: #fff; border-radius: 4px;
}
#sb-wrapper .present_btn a::before {margin-top: -6px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#sb-wrapper .present_btn a::after {margin-top: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
/**デモ用（後で削除）**/


@media (max-width: 769px) { 
#dbz_cpn .cpn .form-box {background:url(../img/cpn/dbz201504/form_bg.gif) repeat-y; margin:20px auto 30px auto; border:2px solid #ff7300; border-radius:8px; width:95%;}
#dbz_cpn .cpn .form-box .ribbon {color:#ffffff; text-align:center; text-shadow: 1px 1px 0 #000000; border-radius:5px 5px 0 0; border-bottom:1px solid #000000;  font-size:20px; padding:10px 0; font-weight:bold; margin:0 0 5px 0;
background: rgb(255,145,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,145,0,1) 0%, rgba(255,115,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,145,0,1)), color-stop(100%,rgba(255,115,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,145,0,1) 0%,rgba(255,115,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,145,0,1) 0%,rgba(255,115,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,145,0,1) 0%,rgba(255,115,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,145,0,1) 0%,rgba(255,115,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9100', endColorstr='#ff7300',GradientType=0 ); /* IE6-9 */
}
#dbz_cpn .cpn .form-box .form_area{padding:10px 10px 20px 10px; position:relative;}
#dbz_cpn .cpn .form-box .form_area .image_set{width:100%; position:relative;}
#dbz_cpn .cpn .form-box .form_area .image_set img{width:100%;}
#dbz_cpn .cpn .form-box .form_area .image_set .upper_stage{width:100%; margin:0; display:block;}
#dbz_cpn .cpn .form-box .form_area .image_set .lower_stage{width:100%; margin:0 0 0 12%; display:block;}
#dbz_cpn .cpn .form-box .form_area .image_set li{float:left; display:block; width:25%; margin:0 0 15px 0;}
#dbz_cpn .cpn .form-box .form_area .image_set li:last-child{float:left; display:block; width:25%; margin:0 0 15px 0;}
#dbz_cpn .cpn .form-box .form_area .image_set li.on{filter:brightness(100%); -webkit-filter: brightness(100%); -ms-filter:brightness(100%);}
#dbz_cpn .cpn .form-box .form_area .image_set li.off{filter:brightness(30%); -webkit-filter: brightness(30%); -ms-filter:brightness(30%);}
#dbz_cpn .cpn .form-box .form_area .image_set .lower_stage li:first-child{float:left; display:block; width:25%; margin:0 0 15px 0;}
#dbz_cpn .cpn .form-box .form_area .image_set .d_ball{position:absolute; z-index:1; width:100%;}
#dbz_cpn .cpn .form-box .form_area .image_set .d_ball img{width:12%;}
#dbz_cpn .cpn .form-box .form_area .animation_area{position:absolute; top:0; left:0; width:100%; height:auto; z-index:4000; text-align:center;}
#dbz_cpn .cpn .form-box .form_area .animation_area img{width:50%;}
#dbz_cpn .cpn .form-box .form_area .animation_db_ball{padding:10% 0;}

#dbz_cpn .cpn .outline-box {border:#797979 2px solid; background-color:rgba(0,0,0,0.9); margin:0 auto 20px auto; padding-bottom:0; width:95%;}
#dbz_cpn .cpn .outline-box h4{font-size:16px; width:100%; border-bottom:#797979 1px dotted; margin:0 0 8px 0; padding:0 0 3px 0; border-left: 0 solid #000000;}
#dbz_cpn .cpn .outline-box p{margin:0 0 10px 0;}
#dbz_cpn .cpn .outline-box .ribbon {color:#ffffff; text-align:center; text-shadow: 1px 1px 0 #000000; border-bottom:1px solid #000000;  font-size:20px; padding:10px 0; font-weight:bold; margin:0;
background: rgb(182,182,182); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(182,182,182,1) 0%, rgba(63,63,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(182,182,182,1)), color-stop(100%,rgba(63,63,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(182,182,182,1) 0%,rgba(63,63,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(182,182,182,1) 0%,rgba(63,63,63,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(182,182,182,1) 0%,rgba(63,63,63,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(182,182,182,1) 0%,rgba(63,63,63,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6b6b6', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
}
#dbz_cpn .cpn .outline-box .outline_area{padding:10px;}

#dbz_cpn .cpn .prev_area{width:100%; margin:0; text-align:center;}
#dbz_cpn .cpn .prev_area .prev_btn{margin:0 auto;}
#dbz_cpn .cpn .prev_area .prev_btn a{color:#FFFFFF; width:90%; font-size:18px; font-weight:bold;}
#dbz_cpn .cpn .prev_area .prev_btn a:hover{color:#FFFFFF; text-decoration:none; width:90%; font-size:18px; font-weight:bold;}

/**デモ用（後で削除）**/
#sb-container{position:fixed; margin:0; padding:0; top:0; left:0; z-index:5000; text-align:left; visibility:hidden; display:none;}
#sb-overlay{position:relative; height:100%; width:100%;}
#sb-wrapper{position:absolute; visibility:hidden; z-index:9999; top:10%; left:0; margin:0; width:100%;}
#sb-wrapper .shenron_image{width:100%;}
#sb-wrapper .shenron_image img{width:100%; max-width:none;}
#sb-wrapper .btn_act{ -webkit-transition:all 0.3s; transition:all 0.3s;}
#sb-wrapper .btn_act:before,.btn_act:after{position: absolute; display: block; content:""; -webkit-transition:all 0.3s; transition:all 0.3s;}
#sb-wrapper .present_btn {width:90%; text-align:center; border:#800000 2px solid; position:absolute; top:70%; left:5%;}
#sb-wrapper .present_btn a{font-size:18px; text-shadow: 1px 1px 0 #000000; padding:10px 0; font-weight:bold; color:#ffffff; position: relative; display: block;text-decoration:none; margin:0 auto;
background: rgb(253,27,27); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(253,27,27,1) 5%, rgba(210,18,18,1) 5%, rgba(133,0,0,1) 50%, rgba(193,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,rgba(253,27,27,1)), color-stop(5%,rgba(210,18,18,1)), color-stop(50%,rgba(133,0,0,1)), color-stop(100%,rgba(193,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(253,27,27,1) 5%,rgba(210,18,18,1) 5%,rgba(133,0,0,1) 50%,rgba(193,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(253,27,27,1) 5%,rgba(210,18,18,1) 5%,rgba(133,0,0,1) 50%,rgba(193,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(253,27,27,1) 5%,rgba(210,18,18,1) 5%,rgba(133,0,0,1) 50%,rgba(193,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(253,27,27,1) 5%,rgba(210,18,18,1) 5%,rgba(133,0,0,1) 50%,rgba(193,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd1b1b', endColorstr='#c10000',GradientType=0 ); /* IE6-9 */
}
#sb-wrapper .present_btn:hover{box-shadow: 0px 0px 10px 3px #e60012; background-color:#9b000c; display:block;}
#sb-wrapper .present_btn a::before,
#sb-wrapper .present_btn a::after {position: absolute; top: 47%; right: 12px; display: block; content: ''; width: 13px; height: 4px; background-color: #fff; border-radius: 4px;
}
#sb-wrapper .present_btn a::before {margin-top: -4px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#sb-wrapper .present_btn a::after {margin-top: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
/**デモ用（後で削除）**/


}

@media (min-width: 768px) {

}