@charset "UTF-8";
@font-face {
font-family: Arial, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック","HG創英角ﾎﾟｯﾌﾟ体", "Osaka",sans-serif;
src: url("../fonts/acgyosyo.ttf") format("truetype");
font-weight: bold;
font-display: swap;
}
@media screen and (max-width: 1600px){
img{
max-width: 100%;
height: auto;
width: auto;
}
    .sel_btn{
        font-weight: bold;
        color: white;
        background-color: violet;
        position:relative;
        top: 10px;
        left:0%;

    }
    .mk_btn{
        font-weight: bold;
        color: white;
        background-color: lightgreen;
        position:relative;
        top: 10px;
        left:0%;
    }
    .up_btn{
        font-weight: bold;
        color: white;
        background-color: #ff8d00;
        position:relative;
        top: 10px;
        left:0%;
          }  
#p_arrow{
    width:80%;
    
}
#smt_blog{
    display:none;
}
.screen{
    display:none;
}
.big:hover{
 -webkit-transform: scale(1.5);
 -moz-transform: scale(1.5);
 -ms-transform: scale(1.5);
 -o-transform: scale(1.5);
    
    
}
input[type=checkbox]:checked {
    background-color: red;
    /* or whatever styles you want depending on your design */
    /* be as obvious as possible that it's a checkbox and that it's checked! */
}
input[type=checkbox] {

 -ms-transform: scale(2); /* IE */
 -moz-transform: scale(2); /* FF */
 -webkit-transform: scale(3); /* Safari and Chrome */
 -o-transform: scale(2); /* Opera */
  padding: 10px;
}
#google_translate_element{
    position:absolute;
    top:0px;
    left:60px;
    width:20%;
    display:block; 
    
}
#list, #comment{
    position:relative;
    top:10px;
    left:5px;
    
}

form.catego {
    margin-bottom: 0px; 
    color:white;
    width:500px;
    
}
input[name="q1"]{
    color:white;

    
}
 #top_menu{
    position:absolute;
    top:150px;
    width:75%;
    display:block;
}   
 #top_menu2{
    position:absolute;
    top:110px;
    width:25%;
    margin-left: 5%;
    display:block;
}   

#rakuten{
    position:absolute;
    top:350px;
    left:1130px;
/*    width:500px;
    height:100px;*/
    background-color:#ffffff;
    z-index: 1000;
}
#bose{
    position:absolute;
    top:750px;
    left:1130px;
/*    width:500px;
    height:100px;*/
    background-color:#ffffff;
    z-index: 1000;
}
#rakuten1{
    position:absolute;
    top:1150px;
    left:1130px;
/*    width:500px;
    height:100px;*/
    background-color:#ffffff;
    z-index: 1000;
}
#inner_bose{
    margin-left:3px;
    
}


#ad_photo{
    position:absolute;
    top:180px;
    left:10px;
    width:500px;
    z-index: 1000;
}
body{
width:100%;
margin-left:10%;
overflow-x: hidden;

}
/******* 基本設定 *******/
body{
margin: 0px;
padding: 0px;
font-family: Arial, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック","HG創英角ﾎﾟｯﾌﾟ体", "Osaka",sans-serif;
line-height: 1.3;
color: #333333;
background-color: SkyBlue;
font-size: 100%;
}
#screen_title{
    font-size: 100px;
    
}
#screen_title_sub{
    font-size: 30px;
    
}
.ele{
    float:left;
    width:100px;
    height:100px;
    
}
#ele_box{
    width:50%;
    overflow:hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック","HG創英角ﾎﾟｯﾌﾟ体", "Osaka",sans-serif;
margin: 0px;
padding: 0px;
}

h1{
font-size: 100%;
color: #334d55;
line-height: 100%;
}

h2{
font-size: 150%;
color: #0000ff;
}

h3{
font-size: 100%;
color: #ffffff;
background-color: #e9e9cf;
}

h4{
font-size: 100%;
color: #333333;
}

h5{
font-size: 100%;
color: #334d55;
}

h6{
font-size: 100%;
color: #333333;
}

dt{
margin-top: 1em;
margin-left: 2em;
font-weight:bold;
}
dd{
margin-left: 5em;
}

label{
font: bold 100% Arial, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
color: #334d55;
}

a img{ /* 画像のリンク枠を消す */
border: none;
}
p {
    font-size: 100%;
    font-weight: bold;   
   
}
/******* フォーマットのレイアウト *******/
body{
text-align: left; /* Internet Explorer 5.5以前への対応 */
}
#container{
/*margin: 0 auto;*/
text-align: left; /* Internet Explorer 5.5以前への対応 */
width: 63%;
min-height: 56%;
margin-top: 0px;
background-color: #ffffff;
}
#block{
	clear: both;
	float: left;
	margin-left: 20px;
}
#disp{
	position: fixed;
	padding: 0px;
	/*margin: 0px 0 0 685px;*/
	top: 10px;
	width: 10px;
        height: 10px;
	margin-left: 60%;
	margin-top: 10px;
}
#spinjs{
        position: absolute;
	padding: 0px;
	margin: 0px 0 0 25%;
	top: 23%;
	width: 20px;
}
#content{ 
float:right;
margin: 0px 0px 0px 10px;
top: 15.6%;
padding: 5px 10px 10px 5px;
background-color: #ffffff;
}
#footer{
clear: both;
margin: 0px;
margin: 0 10px;
padding: 0x;
border-top: 6px solid #004c8f;
background-color: #ffffff;
height: 65px;
}
#content img{
padding: 0px 0px 0px 10px;
}
#gazou{
	pedding-top:11%;
}
#indent {
	text-indent: -1em;
}
p.text {
	line-height: 0.5;
}
/******* ヘッダ *******/
#header h1{
margin: 0px 0px 0px 24px;
padding: 8px 5px 5px 5px ;
color: #117aee;
font-size: 13px;
z-index: 10;
}
#entrybody{
position: absolute;    
text-align: left;  /*Internet Explorer 5.5以前への対応  */
margin: 10px 0px 0px 0px;
font-size: 90%;
/*background-color: #eeeeff;*/
background-color: #dddddd;

/*background: transparent;*/
height: auto;
width: 99%;
float: left;
top: 20%;
left:10px;
z-index: 10;
}
#mylist_sample{
position: relative;    
text-align: left; /* Internet Explorer 5.5以前への対応 */ 
/*margin: 10px 0px 0px 0px;*/
font-size: 100%;
font-weight: bold;
background-color: #eeeeff;
width: 100%;
float: left;
top: 0%;
z-index: 99999;
}
#vv{
position:absolute;
top:200px;

margin: 0px 0px 0px 10px;
z-index: 100;

}
#player{
margin: 20px 0px 0px 10px;
}
/******* フッタ *******/
#footer h3{
float: right; /* サイトコピーライトをフッタの右に*/
padding-top: 10px; /* サイトコピーライトの上からの位置 */
padding-right: 30px;
margin-bottom: 40px;
font-family: Arial, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック","HG創英角ﾎﾟｯﾌﾟ体", "Osaka",sans-serif;
font-size: 13px;
font-weight: normal;
color: #333;
	float: left;
}
thead, tfoot{
padding: 0.4em;
font-weight: bold;
/*
background-color: #CCFF99;
text-align: center !important;
*/
}
/*** 文字装飾 ***/
.bold{
font-weight: bold;
}
.red{
color: #cc0000;
font-weight: bold;
}
.blue{
color: #0000cc;
font-weight: bold;
}
.magenta{
color: #ff3399;
font-weight: bold;
}
.cyan{
color: #0099ff;
font-weight: bold;
}
/***********************/
.head_img {
margin: 16px 0 0 16px;
}
.head_img img{
padding: 0px;
margin:0px;
margin-bottom:5px;
}
#login_status{
    position: absolute;
    padding: 0px;
    margin: 0px 0 0 75%;
    top: 51%;
    width: 13%;
    
}
.border0{
    border-width: medium;
    border-color: #1410BC;
    color: red;
    font-weight: bold;
}
.border{
    border-width:  thick;
    border-color: #1410BC;

}

.border1{
    border-top: thick solid #1410BC;
    border-left: thick solid #1410BC;
    border-right: thick solid #1410BC;
}
.border2 {
    border-left: thick solid #1410BC;
    border-right: thick solid #1410BC;

}
.border3 {
    border-bottom: thick solid #1410BC;
    border-left: thick solid #1410BC;
    border-right: thick solid #1410BC;

}
#view_slist {
	position: fixed;
	padding: 0px;
	margin: 0px 0px 0 64%;
	top: 500px;
	width: 13%;
}

a.fixed-0   {  
    position: fixed;  
    left: 0;  
    bottom: 0;
    color: #ffffff;  

}  
a.fixed-1   {  
    position: fixed;  
    right: 0;  
    bottom: 0;
    color: #ffffff;  

}
a#home   {  
    position: fixed;  
    left: 10px;  
    top: 10px;
    color: #000000;  

}
#dashboard{
position:fixed;
top:32%;
background-image: url(../dashboard.png); 
margin: 0px 0px 0px 72%;
font-size: 90%;
display:none;
z-index: 100;
}
/*.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  */
#comment_txt{
 line-height:1.4em;
  width:100%;  
}
pre {
font-size:100%;  
font-weight: bold;
}
.best30:hover{
border:3px #88ABDA solid;
margin:0 6px 0 1.9%;
}
#b30_choiseplay:hover{
-moz--animation: pulse 1.5s infinite ease-in-out;
/*border:3px #88ABDA solid;
margin:0 6px 0 6px;*/
}
.clearfix {
    display: inline-table;
}
/* Hides from IE-mac \  */
* html { height: 1%; }  
.clearfix {
    display: block;
}
@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.8;/*透明度80%*/
 }
}
#ctl_btn{
    display:none;
}
/* tooltip styling. by default the element to be styled is .tooltip  */
  .tooltip{
    display:none;
    background:transparent url(../images/black_arrow.png);
    font-size:12px;
    height:7.8%;
    width:10%;
    padding:1.6%;
    color:#eee;
  }
#mylist_select {
        font-size:1.5em;
	position:absolute;
	padding: 0px;
	left:20%;
	top: 150px;
	width: 13%;
        z-index: 1000; 
}
#mylist_ref{
    display:none;
}
#sample_list_file{
    display:none;
}
#test_button{
margin: 0 0 0 0px;    
width:50%;
height: 50%;
}
#play_sts{
    margin-left: 30%;
    width:14%;
    height:10%;
    display:none;
}
#index{
    font-weight: bold;
    color: #334d55;
}
#new_version_url{
   position:absolute; 
   left:0px;  
   top: 5px; 
}
#test_url_a{
 z-index: 100;
}
#test_url_img{
  z-index: 10;
}
#play_btn{
background-color: transparent;    
border-color: transparent;    
}
img.play_title_btn {
/*   display: block;              ブロック要素にする */
   width: 3.0%;                /* 横幅 */
   color: #ffffff;
   background-color: #666699;  /* 背景色 */
   border: outset 2px #9999cc; /* 枠の色 */
   margin: 0px;
   padding: 3px 1px 1px 0px;
   font-size: 12px;            /* フォントサイズ */
   line-height: 12px;          /* 行の高さ */
   text-align: center;         /* 水平揃え */
   text-decoration: none;      /* 下線を消す */
 }
img.play_title_btn:hover {
   color: #eeeeee;
   background-color: #555588;  /* 背景色 */
   border: inset 4px #9999cc;  /* 枠の色 */
   margin: 0px;
   padding: 4px 0px 0px 3px;
 }
imgplay_title_btn:active { color: #ffffff; }
img.play_title_btn:visited { color: #ffffff; }


pre span{
 color: blue;      
}
/* ページトップへ戻る */
.pageTop {
	position:fixed;
                 top: 90%;
	width:4.1%;
	height:4.1%;
	margin:0 auto;
        z-index:9999;

}
.pageTop a {
/*	position: fixed;
	bottom: 0px;
	left:auto;
	display: block;
	width: 4.1%;
	height:4.3%;
	margin-left:95%;
	 ↓以下はリンク装飾↓ 
	padding:1em 0;
	background: #ffffff;
	text-align:center;
	outline:none;
	text-decoration: none;
	z-index:9999;
	border-radius:3px 3px 0 0;*/
}
/*
input[type=radio] {
  display: none;
}*/


input[type=radio]:checked + .radio:before {
  opacity: 1;
}
#b1:hover{
    background-color: #0000ff;
    z-index:1; 
}
#b2{
    z-index:9999; 
}
/* End hide from IE-mac */  

.caption :hover {
  -moz-transform: scale(0.5,0.5);
  -webkit-transform: scale(0.5,0.5);
  -o-transform: scale(0.5,0.5);
  -ms-transform: scale(0.5,0.5);
}
.cap1{
margin-top: 10%;
margin-left:10%;
}
.cap1 :hover {
  -moz-transform: scale(1.3,1.3);
  -webkit-transform: scale(1.3,1.3);
  -o-transform: scale(1.3,1.3);
  -ms-transform: scale(1.3,1.3);
}
#u-mobile{
    z-index:9999; 
    
}
#top_menu input:hover{
color:yellow;
font-weight:bold;
  -moz-transform: scale(1.3,1.3);
  -webkit-transform: scale(1.3,1.3);
  -o-transform: scale(1.3,1.3);
  -ms-transform: scale(1.3,1.3);

}
#top_menu2 input:hover{
color:yellow;
font-weight:bold;
  -moz-transform: scale(1.3,1.3);
  -webkit-transform: scale(1.3,1.3);
  -o-transform: scale(1.3,1.3);
  -ms-transform: scale(1.3,1.3);

}

#tool input:hover{
color:yellow;
font-weight:bold;
  -moz-transform: scale(1.3,1.3);
  -webkit-transform: scale(1.3,1.3);
  -o-transform: scale(1.3,1.3);
  -ms-transform: scale(1.3,1.3);

} 
/*.big{
position:relative;
left:10px;

}*/

/*.big img:hover {
 -webkit-transform: scale(1.5);
 -moz-transform: scale(1.5);
 -ms-transform: scale(1.5);
 -o-transform: scale(1.5);
}*/
.b_menu{
    width:100px;
    height:auto;
    
}
#site_info_btn{
        position: absolute;
        top: 0px;
        font-size:130%;
        margin-left: -20%;
        width:35%;
        height:190%;
        z-index:9999;
    
} 
#relax{
    	position: absolute;
        top: 0px;
        margin-left:5%;
        width:45%;
        height:30%;        
        z-index:9999;
}
#screen{
    	position: absolute;
        top: 0px;
        margin-left:21%;
        width:45%;
        height:30%;        
        z-index:9999;
}
/*#new{
    	position: absolute;
        top: 0px;
        margin-left:36%;
        width:45%;
        height:30%;        
        z-index:9999;
}*/
/*#b_s_jp{
    position: absolute;
    top: 0px;    
    margin-left:40%;
    width:45%;
    height:30%;
}
#b_s_en{
    position: absolute;
    top: 0px;
    margin-left:60%;
    width:45%;
    height:30%;
}*/
#tag{
    position: absolute;
    top: 0px;
font-family: Arial, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック","HG創英角ﾎﾟｯﾌﾟ体", "Osaka",sans-serif;
    font-size:150%; color: #0000ff; font-weight: bold;
    margin-left:80%;
    width:45%;
    height:190%;    
    
}

#genre{
    display:none;
}
#op_pane{
        position:absolute;
        top:100px;
        left:71.5%;
        width:24%;
        height:15%;
        background-color:yellow;
        z-index:9999;
    }   
#clear_btn{
        position: relative;
        top: 15px;
        left:5px;
        z-index:9999;
}
#genre_btn{
        position: relative;
        top: 15px;
        left:6%;
        z-index:9999;
}
#dashbord_btn{
        position: relative;
        top: 15px;
        left:12%;
        z-index:9999;
}
#genre_panel{
position:absolute;
top:15%;
left:77%;
width: 22%;
height:40%;
background-color: transparent;
/*background-color: red;*/
z-index:9999; 
}
#dashbord_panel{
    	position: absolute;
        top: 10px;
        left:90%;
        z-index:9999;
}
/*#slotmachine{
    	position: absolute;
        top: 750px;
        left:71%;
        z-index:9999;
}*/
#aaatag_{
       position: absolute;
        top: 10px;
        left:0%;
        width:60%;
        height:70%;
        font-size: 100%;
        z-index:10000;
/*        opacity: 0.0;*/
        display:none;

}
/*吹き出し balloon.js　*/
.blog_btn_{
  position:absolute;
  top: -100px;left:0px; 
  width: 226px; height: 164px; line-height: 1.0em;
  background: url(../images/balloon-sample1.png) center center no-repeat transparent;
  color: #fff; font-size: 150%; font-weight: bold; text-align: center;
}
.blog_search_{
  position:absolute;
  top: -100px;left:0px; 
  width: 226px; height: 164px; line-height: 1.0em;
  background: url(../images/balloon-sample1.png) center center no-repeat transparent;
  color: #fff; font-size: 100%; font-weight: bold; text-align: center;
}
/*#login{
    display:none;
}*/
#login_gamen{
  position:absolute;
  top: 10%;
  left:40%; 
  width: 800px;
  height: 400px; 
  line-height: 2.0em;
/*  background: #ffffff;*/
  text-align: left;
  z-index:-99999;  
  display:block;  
    
}
 #userid{
 height:40px;    
 font-size:20px; 
}
#password{
 height:40px;    
 font-size:20px; 
 
 } 
#disp_nm{
 height:40px;    
 font-size:20px; 
 
 } 
/* #ulist{
 position: relative;    
 display:none;    
 }*/
  #user_list_hv{
  position:fixed;
  top: 5%;
  left:50%; 
  width: auto;
  height: 85%; 
  line-height: 1.5em;
  background: #ffffff;
  text-align: left;
  z-index:100000;  
  display:none;  
      
}
 #user_list{
  position:fixed;
  top: 2%;
  left:45%;
  padding-left:3px;
  width: auto;
  height: 500px; 
  line-height: 1.5em;
  background: #ffffff;
  text-align: left;
  z-index:99999;  
  display:none;
      
}
#ulist_b{
  margin-top:0%;
  margin-left:0%;  
  width: 800px;
  height: 100%; 
  overflow:auto;    
}


input.user_list_{
  line-height: 1.5em;
    
}
#access_graph{
  position:fixed;
  top: 5%;
  left:50%; 
  width: auto;
  height: 85%; 
  line-height: 1.5em;
  background: #ffffff;
  text-align: left;
  z-index:99999;  
  display:block;  
      
}
#bs_img{
       position: relative;
        top: 10px;
/*        left:45%;*/
/*        width:50px;
        height:20px;*/
        font-size: 120%;
        z-index:99999;

}
#bs_img_mess{
       position: absolute;
        top: 40px;
        left:45%;
        width:400px;
        height:200px;
        font-size: 120%;
        background: #ffffff;
        display:none;
        z-index:100000;

}
#opncls_best30{
        z-index:100000;

}
table {
border-spacing: 0;
border-color: transparent;
border-collapse: collapse;
}

.table>thead>tr>th {
border-bottom-width: 1px;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: transparent;
height:100%;
}
#copyright{
      position: fixed;
    bottom: 0;
    width: 35%;
    height: 30px;
    z-index:999999;
    margin:0 0 0 60%;
    
}
}