.all_bg_back{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 0;
background-image: url('../img/bg_pattern01.png?2');
background-size: auto 100%;
background-size: cover;
background-position: right bottom;
background-repeat: no-repeat;
/*background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(12,187,194,1)), color-stop(75%,rgba(29,10,92,1)), color-stop(75%,rgba(29,10,92,1))); /* Chrome,Safari4+ */
/*background: -webkit-radial-gradient(center, ellipse cover,  rgba(12,187,194,1) 0%,rgba(29,10,92,1) 75%,rgba(29,10,92,1) 75%); /* Chrome10+,Safari5.1+ */
/*background: radial-gradient(ellipse at center,  rgba(12,187,194,1) 0%,rgba(29,10,92,1) 75%,rgba(29,10,92,1) 75%); /* W3C */

/*PC用*/
/*left: 50%;
margin-left: -512px;*/

background-image: url('../img/bg_pattern2017.png?2');
background-size: 100% auto;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}

.all_bg_upper{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-image: url('../img/bg_pattern01.png?2');
background-size: auto 100%;
background-size: cover;
background-position: right bottom;
background-repeat: no-repeat;
/*opacity: 0.2;*/
}
.btn{
background: #f0f0f0;
padding: 0.3em 1.2em;
border-radius: 0.5em;
margin: 1em 0;
font-weight: bold;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 2px solid rgba(20,20,20,0.4);
color: #333333;
}
.set_btn{
display: inline-block;
padding: 0.5em;
background: #f0f0f0;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 2px solid rgba(20,20,20,0.6);
border-radius: 0.5em;
}
.btn_active{
background: #fe9090;
color: white;
border-bottom: 1px solid rgba(255,255,255,0.5);
border-top: 1px solid rgba(20,20,20,0.4);
margin-bottom: 1px;
}
.constellation_btn{
display: block;
width: 80%;
border-radius: 0.5em;
background: rgba(40,40,70,0.7);
border: 1px solid rgba(235,223,224,0.8);
margin: 0.5em auto;
text-align: left;
padding: 0.2em 0.5em;
}
.constellation_btn_act{
background: rgba(26,26,46,0.8);
border: 1px solid rgba(255,255,255,0.8);
}
.constellation_btn_img img{width: 100%;}
.constellation_btn_img{
display: inline-block;
width: 2em;
vertical-align: middle;
}
.constellation_btn_name{
display: inline-block;
font-size: 1.1em;
color: #ffffff;
font-weight: bold;
vertical-align: middle;
}
#share_btns{
text-align: center;
padding-top: 0.6em;
padding-left: 1em;
}
#read_more{
float: right;
margin-right: 0.8em;
margin-top: 0.5em;
}
#overlay {
display: none;    
position: fixed;  
left: 0px;        
top: 0px;         
width: 100%;      
height: 100%;     
background: #000; 
opacity: 0.9;     
z-index: 1000;   
}

#popup_setting {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 18em;     
height: 14em;
margin-left: -9em;
margin-top: -8em;
border-radius: 10px;
background: #FFFFFF;
z-index: 10000;
overflow-x: hidden;
}

.setting_title{
display: none;    
position: fixed;
background: #F2A444;
font-size: 1.3em;
color: white;
margin: 0 0 0.3em;
font-weight: bold;
border-radius: 10px 10px 0 0;   
z-index: 20000; 
}

.loading_detail{
/*display: none;*/
position:fixed;
left: 50%;
top: 50%;
width: 2em;
text-align: center;
padding: 0.4em;
background: rgba(255,255,255,0.5);
border-radius: 8px;
/*margin: 0 auto;*/
margin-top: -1em;
margin-left: -1em;
z-index: 5000; 
}
.share_img{
width: 10em;
height: 10em;
margin: 0 auto 1.5em;	
}
.constellation_pic{
width: 10em;
height: 10em;
margin: 0 auto 1.5em;
/*background-image: url('../img/picture_bg.png?2');
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;*/
}
.constellation_pic img{width: 12em;}
.constellation_name{
display: none;
font-size: 3em;
color: rgba(255,255,255,0.8);
font-weight: bold;
position: absolute;
top: 0;
left: 50%;
margin-top: 0.5em;
margin-left: 1.8em;
}
.now_date{
font-size: 1.5em;
color: rgba(250,250,250,0.8);
padding: 0.5em;
}
.day_info{
display: inline-block;
font-size: 1.2em;
vertical-align: middle;
font-weight: bold;
color: #FFC842;
}
.star{
font-size: 1.2em;
vertical-align: middle;
font-weight: bold;
color: #6a3906;
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
margin-left: -0.2em;
margin-bottom: 0.2em;
}
.star img{
height: 1em;
}
.info_detail{
display: inline-block;
width: 70%;
font-size: 1em;
text-align: left;
color: white;
vertical-align: top;
padding-top: 0.5em;
}
.fortune_detail{
display: block;
width: 95%;
padding: 0.5em;
line-height: 1.5;
}
.share_btn{
display: inline-block;
width: 3em;
height: 3em;
border-radius: 0.5em;
margin: 0.3em 0.5em;
}
.line{background: url('../img/line_icon.png');}
.fb{background: url('../img/fb_icon.png');}
.share_btn_active{
opacity: 0.9;
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.8) inset;
}
.line, .fb{
background-size: 3em, 3em;
background-position: 0 0;
background-repeat: no-repeat;
}
.tab{
padding: 0.5em 0.4em;
background: rgba(250,250,250,0.2);
color: white;
/*background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
/*background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
}
.tab_act{
background: rgba(255,255,255,0.5);
/*background: -moz-linear-gradient(top,  #ff5c5c 0%, #fe9090 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5c5c), color-stop(100%,#fe9090)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top,  #ff5c5c 0%,#fe9090 100%); /* Chrome10+,Safari5.1+ */
/*background: linear-gradient(to bottom,  #ff5c5c 0%,#fe9090 100%); /* W3C */
/*-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.6)inset;*/
font-weight: bold;
color: #FFC842;
text-shadow: 0 1px 1px rgba(20,20,20,0.4);
}
.tab_left{border-radius: 0.2em 0 0 0.2em;}
.tab_right{border-radius: 0 0.2em 0.2em 0;}
.top_btn_name{
font-size: 1.3em;
color: white;
font-weight: bold;
margin-right: 0.5em;
}
.type_name{
color: white;
font-weight: bold;
margin-right: 0.2em;
}
.type_score{
color: white;
font-size: 1.4em;
}
.type_content{
color: #2d190e;
}
.top_arrow, .bottom_arrow{
display: inline-block;
margin-right: 0.2em;
vertical-align: middle;
}
.top_btn{
display: block;
padding: 0.3em 0.5em 0.5em;
margin-bottom: 0.5em;
background-color: #ff9580;
border-top: 1px solid rgba(255,255,255,0.7);
border-bottom: 2px solid rgba(20,20,20,0.2);
}
.top_btn_active{
display: block;
background-color: #f57158;
padding: 0.3em 0.5em 0.5em;
margin-bottom: 0.5em;
border-top: 1px solid rgba(255,255,255,0.7);
border-bottom: 2px solid rgba(20,20,20,0.2);
}
.bottom_btn{
display: block;
padding: 0.3em 0.5em 0.5em;
background-color: #ff9580;
border-top: 1px solid rgba(255,255,255,0.7);
border-bottom: 2px solid rgba(20,20,20,0.2);
}
.bottom_btn_active{
display: block;
background-color: #f57158;
padding: 0.3em 0.5em 0.5em;
border-top: 1px solid rgba(255,255,255,0.7);
border-bottom: 2px solid rgba(20,20,20,0.2);
}
.article_block, .astrology_block, .constellation_block, .record_block{
width: 94%;
margin: 0.8em auto;
border-radius: 0.5em;
background: rgba(224,214,230,0.2);
}
.titile_name{
font-weight: bold;
color: white;
font-size: 1.1em;
}
.block_titile{
padding: 0.4em 0.5em;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.article_btn, .astrology_btn{
width: 100%;
display: block;
padding: 0.4em 0;
color: white;
font-weight: bold;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.article_btn_active, .astrology_btn_active{
width: 100%;
display: block;
padding: 0.4em 0;
color: #ECDE97;
font-weight: bold;
border-bottom: 1px solid rgba(255,255,255,0.5);
background: rgba(224,214,230,0.2);
}
.record_btn{
display: inline-block;
padding: 0.45em 0.5em;
color: white;
font-weight: bold;
float: right;
margin-top: -0.4em;
margin-right: -0.5em;
}
.record_btn_active{
display: inline-block;
padding: 0.45em 0.5em;
font-weight: bold;
float: right;
color: #ECDE97;
margin-top: -0.4em;
background: rgba(224,214,230,0.2);
border-radius: 0 0.5em 0 0;
margin-right: -0.5em;
}
.more_btn{
display: block;
width: 100%;
padding: 0.4em 0;
color: white;
font-weight: bold;
}
.more_btn_active{
display: block;
width: 100%;
padding: 0.4em 0;
color: #ECDE97;
font-weight: bold;
background: rgba(224,214,230,0.2);
}
.more_btn_active{border-radius: 0 0 0.5em 0.5em;}
.constellation_name_btn{
display: block;
font-weight: bold;
color: white;
font-size: 1.1em;
padding: 0.4em 0.5em;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.constellation_name_btn_active{
display: block;
font-weight: bold;
color: #ECDE97;
font-size: 1.1em;
padding: 0.4em 0.5em;
border-radius: 0.5em 0.5em 0 0;
background: rgba(224,214,230,0.5);
border-bottom: 1px solid rgba(255,255,255,0.8);
}
.constellation_name_btn_active >.icon-selectArrow{
font-size: 0.8em;
color: #ECDE97;
padding: 0 0.6em;
}
.icon-selectArrow{
font-size: 0.8em;
color: white;
padding: 0 0.6em;
}
.constellation_content{
padding: 0.5em;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.constellation_block_list{
padding: 0.2em 0;
color: white;
font-weight: bold;
}

::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {
background-color: #eeeff0;
border-radius: 30px;
margin: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #666666;
border: #e4e8eb 1px solid;
border-radius:  30px;
}
/*********tts********************/
.tts_btn{
display: inline-block;
padding: 0.2em;
border-radius: 5px;
border: 1px solid #786A5F;
text-align: center;
color: #604C3F;
}
.tts_btn_a{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, white), color-stop(0.9, #E6E3DF), color-stop(1, #D9D3C8));
background: -moz-linear-gradient(top, white, #E6E3DF , #D9D3C8);
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.tts_btn_b{
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #E6E3DF), color-stop(1, #D9D3C8));
background: -moz-linear-gradient(bottom, #E6E3DF, #D9D3C8);
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.8), 0 0 2px rgba(10,10,10,0.8) inset;	
}
.speaker{
position: fixed;
bottom: 3%;
right: 2.5%;
z-index: 9999;
border-radius: 5px;
background: rgba(255,255,255,0.5);
padding: 0.2em;
}
.icon-speaker, .icon-pause, .icon-fastForward, .icon-arrowRightfull{
font-size: 2em;
color: #CE417A;
}
.go_download a:link, .go_download a:visited, .go_download a:active{
text-decoration: none;
vertical-align: middle;
color: white;
}