/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html{
scroll-behavior: smooth;
}
 
body{
font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
background:#f4f5f7;
padding: 0px 5px 0px 5px;
 
}
 
#header{
background:#1e73be;
 
width: 100%;
}
 
.introduction{
color:#ffffff;
font-size: 90%;
text-align:center;
padding: 5px 0px 10px 0px;
clear: both;
}
 
.sitetitle{
font-size: 180%;
font-weight: lighter;
text-align: center;
padding: 10px 0px 20px 0px;
}
 
#header a{
color:#ffffff;
}
 
#header a:hover{
color:#cccccc;
text-decoration:none;
}
 
.nav-wrap{
position: relative;
margin: 10px 0px 10px 0px;
}
 
.scroll-nav{
 
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* 慣性スクロール */
}
 
.scroll-nav ul{
max-width: 2060px; /* メニューの最大幅 */
white-space: nowrap;
list-style: none;
}
 
.scroll-nav ul li{
border-right: solid 1px #ffffff;
display: inline-block;
padding: 5px 10px 5px 10px;
text-align: center;
}
 
ul li:last-child{
border-right: none;
}
 
.ninkiTop{
max-width: 10000px;
padding: 10px 0px 10px 0px;
white-space: nowrap;
list-style: none;
}
 
.logo{
padding: 15px 10px 5px 10px;
font-size: 180%;
font-weight:bold;
 
}
 
#pankuzu{
margin: 5px 0px 5px 0px;
padding: 10px 0px 10px 0px;
}
 
#wrapper{
margin-top:10;
margin-right:auto;
margin-bottom:5;
margin-left:auto;
width:98%;
position:relative;
}
 
#main{
background:#ffffff;
float:left;
width:69%;
padding: 0px 1% 0px 1%;
margin: 0px 1% 0px 0px;
}
 
#sidebar{
float:right;
width:26%;
padding: 0px 1% 0px 1%;
margin: 0px 0px 0px 0px;
background:#ffffff;
}
 
.sidebarinfo{
margin: 50px 0px 50px 0px;
}
 
a{
color:#0066ff;
text-decoration:none;
}
 
a.logo:hover{
color:#3299ff;
text-decoration:none;
}
 
/* hover:マウスポインタが乗ったら */
a:hover{
color:#0066cc;
text-decoration:underline;
}
 
#footer{
color:#ffffff;
background:#1e73be;
width: 100%;
margin: 10px 0px 0px 0px;
padding: 20px 0px 20px 0px;
text-align:center;
font-size: 90%;
}
 
#footer a{
color:#ffffff;
}
 
#footer a:hover{
color:#cccccc;
text-decoration:none;
}
 
.categorycell{
position: relative;
z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
margin: 50px 0px 0px 0px;
min-height:100px;
 
}
 
.categoryImg{
width: 200px; /* 領域の幅を指定 */
height: 120px; /* 領域の高さを指定 */
margin: 0px 10px 0px 10px;
float: left;
object-fit:cover;
}
 
.categorycell a{
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
text-indent: 100%; /*テキスト非表示*/
white-space: nowrap; /*テキスト非表示*/
overflow: hidden; /*テキスト非表示*/
display:block;
}
 
.categorycell a:hover{
opacity:0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background: #fff;
}
 
.honeycombCell{
font-size: 90%;
text-align: center;
float:left;
border: solid 1px #cccccc;
margin: 1px 1px 1px 1px;
padding: 2px 2px 2px 2px;
width:24%;
overflow: hidden;
height: 190px; 
white-space: normal;
}
 
.ninkiTop .honeycombCell{
 
float:none;
width:200px;
display: inline-block;
 
}
 
.honeycombImg{
width: 100%;
height: 150px;
object-fit:cover;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.categorytitle{
color:#333333;
font-size: 110%;
font-weight: bold;
margin: 0px 0px 7px 0px;
}
 
 
 
 
 
 
 
 
 
 
.categoryContents{
padding: 3px 0px 3px 0px;
overflow: hidden;
}
 
.categorydate{
font-size: 90%;
text-align:right;
margin: 5px 0px 10px 0px;
color:#999999;
}
 
.categorysummary{
color:#333333;
font-size: 95%;
 
}
 
p{
margin: 10px 0px 10px 0px;
clear: both;
}
 
span{
 
 
 
}
 
i{
font-style:normal;
background: linear-gradient(transparent 80%, #66ccff 60%);
}
 
u{
font-style:normal;
background: linear-gradient(transparent 80%, #cd3600 60%);
text-decoration: none;
}
 
b{
font-weight:bold;
background: linear-gradient(transparent 0%, #ffff00 60%);
}
 
b.bA{
background: none;
font-weight:bold;
font-size: 110%;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
.imgC{
margin: 30px 0px 30px 0px;
max-width: 98%;
max-height: 450px; 
display: block;
object-fit:contain;
}
 
.imgD{
 
width:500px;
height: 400px; 
margin: 20px 0px 20px 0px;
object-fit:contain;
display: block;
}
 
.imgE{
margin: 20px 0px 20px 0px;
width:250px;
display: block;
}
 
.imgG{
margin: 30px 0px 30px 0px;
 
width:100%;
display: block;
}
 
 
 
 
 
h1{
font-size: 150%;
 
 
background-color:# rgb(245, 245, 245);
border-top: 2px solid rgb(153, 153, 153);
border-bottom: 2px solid rgb(153, 153, 153);
margin: 10px 0px 10px 0px;
padding: 5px 0px 10px 5px;
clear: both;
}
 
h2{
 
 
background-color:# rgb(245, 245, 245);
 
border-bottom: 1px solid rgb(153, 153, 153);
 
clear: both;
margin: 50px 0px 10px 0px;
padding: 5px 0px 5px 5px;
}
 
h3{
border-left: 3px solid rgb(153, 153, 153);
border-bottom: 1px solid rgb(153, 153, 153);
margin: 40px 0px 10px 0px;
padding: 5px 0px 5px 5px;
clear: both;
}
 
h4{
border-left: 1px dotted rgb(153, 153, 153);
margin: 30px 0px 10px 0px;
padding: 5px 0px 5px 5px;
clear: both;
}
 
h5{
border-left: 1px solid rgb(153, 153, 153);
margin: 20px 0px 10px 0px;
padding: 3px 0px 3px 5px;
clear: both;
}
 
h6{
border-left: 3px solid rgb(0, 153, 51);
font-size: 100%;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 7px;
}
 
.rankH2{
font-size: 110%;
font-weight:bold;
color:#010101;/*文字色*/
background-color:# rgb(245, 245, 245);
 
border-bottom: 1px solid rgb(153, 153, 153);
 
clear: both;
margin: 50px 0px 10px 0px;
padding: 5px 0px 5px 5px;
}
 
.rankH3{
font-size: 110%;
font-weight:bold;
background-color:#eaf3ff;
border-bottom: 1px solid #516ab6;
border-left:none;
margin: 5px 0px 5px 0px;
padding: 5px 0px 5px 5px;
clear: both;
}
 
.rankH4{
border:none;
font-size: 110%;
font-weight:bold;
margin: 20px 0px 10px 0px;
padding: 0;
clear: both;
}
 
caption{
 
font-weight:bold;
background-color:# rgb(245, 245, 245);
margin: 3px 0px 3px 0px;
padding: 3px 0px 3px 0px;
clear: both;
}
 
table{
table-layout: fixed;
}
 
.tableA{
border-collapse:collapse;
 
padding: 20px 10px 20px 10px;
margin: 20px 0px 20px 0px;
 
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
th{
font-weight:bold;
 
background-color:#F5F5F5;
 
padding: 5px 5px 5px 5px;
text-align:center;
}
 
td{
padding: 2px 2px 2px 2px;
 
 
}
 
.mini_Ranking{
display:block;
border: medium solid #cccccc;
 
padding: 10px 10px 10px 10px;
margin: 20px 10px 0px 0px;
width:45%;
float:left;
}
 
div.ranking_Overview{
padding: 10px 10px 10px 10px;
margin: 20px 0px 20px 0px;
width:95%;
}
 
 
 
 
 
 
 
 
 
 
 
.mokuji{
background-color:# rgb(251, 255, 251);
border-top: 2px solid rgb(153, 153, 153);
border-bottom: 2px solid rgb(153, 153, 153);
margin: 30px 5% 10px 5%;
padding: 5px 10px 5px 10px;
width:60%;
clear: both;
}
 
.ads{
 
 
 
clear: both;
 
margin: 30px 0% 30px 0%;
 
width:300px;
 
}
 
 
 
 
 
 
.globalnavi{
 
 
margin: 5px 0px 5px 0px;
clear: both;
}
 
ol,ul{
padding: 0px 0px 0px 20px;
}
 
 
 
 
 
#sidebar li{
margin: 5px 0px 0px 0px;
background-repeat:no-repeat;
border-bottom:1px solid #ebebeb;
padding: 5px 10px 5px 0px;
clear: both;
}
 
#sidebar li a{
display:block;
}
 
li.atte{
list-style-image: url(atte.jpg);
list-style-position: outside;
margin: 0px 0px 0px 30px;
font-weight:bold;
}
 
.smaphoonly{
display:none;
}
 
.notsmapho{
display:inline;
}
 
.red{
font-weight:bold;
color:#ff0000;
}
 
.midashi{
color:#ffffff;
font-size: 110%;
font-weight:bold;
background:#1e73be;
 
 
 
 
margin: 10px 0px 10px 0px;
padding: 15px 0px 15px 10px;
clear: both;
}
 
.subhtagA{
color:#ffffff;
font-size: 110%;
font-weight:bold;
background:#1e73be;
 
 
 
 
margin: 10px 0px 10px 0px;
padding: 15px 0px 15px 10px;
clear: both;
}
 
.subhtagB{
 
 
 
background-color:# rgb(245, 245, 245);
 
border-bottom: 1px solid rgb(153, 153, 153);
 
clear: both;
margin: 50px 0px 10px 0px;
padding: 5px 0px 5px 5px;
}
 
.fontsmall{
font-size: 90%;
}
 
.update{
font-size: 90%;
padding: 2px 0px 30px 0px;
 
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.kanren{
margin: 30px 0px 10px 0px;
}
 
.overview{
color:#464646;
border-bottom: solid 1px #e0e0e0;
padding: 5px 3px 10px 3px;
margin: 5px 3px 10px 3px;
}
 
.box1{
border: solid 1px #0066cc;
 
margin: 2px 0px 2px 0px;
display: inline-block;
}
 
.paginationTable{
margin:40px 0px 0px 0px;
}
 
.pagination{
background:#1e73be;
color:#ffffff;
border: solid 1px #eaeaea;
float:left;
margin:10px 3px 10px 3px;
padding: 13px 18px 13px 18px;
text-align:center;
}
 
.paginationLink a{
border: solid 1px #eaeaea;
float:left;
margin:10px 3px 10px 3px;
padding: 13px 18px 13px 18px;
text-align:center;
display:block;
}
 
.box3{
 
float: left;
font-weight: bold;
font-size: 120%;
margin: 10px 20px 10px 20px;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.blue{
background-color:#3300ff;
font-weight: bold;
color:#ffffff;
margin: 5px 20px 5px 20px;
padding: 1px 3px 1px 3px;
display: inline-block;
}
 
.koushiki{
background-color:#ff6666;
border: solid 1px #cccccc;
margin: 5px 5px 5px 0px;
padding: 1px 3px 1px 3px;
width:48%;
min-height:50px;
float: left;
text-align: center;
}
 
.koushiki a{
font-weight: bold;
color:#ffffff;
display: block;
width: 100%;
min-height:50px;/*縦の中央揃えに必須。消さないこと*/
display: flex;
justify-content: center;
align-items: center;
}
 
 
 
 
 
 
.shosai{
border: solid 1px #6666ff;
 
color:#6666ff;
margin: 5px 5px 5px 0px;
padding: 1px 3px 1px 3px;
display: inline-block;
float: left;
text-align: center;
}
 
.shosai a{
font-weight: bold;
display: block;
width: 100%;
min-height:50px;/*縦の中央揃えに必須。消さないこと*/
display: flex;
justify-content: center;
align-items: center;
}
 
.clear{
clear: both;
padding: 3px 0px 3px 0px;
}
 
iframe{
max-width: 100%;
max-height: 450px;
border:none;
margin: 20px 0px 10px 0px;
display:block;
}
 
 
 
 
 
 
 
 
 
 
 
.invisible{
display:none;
}
 
.ninja-recommend-block{
margin: 20px 0px 20px 0px;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* アコーディオン */
.accbox{
padding: 0;
}
 
/*ラベル*/
.accbox label{
margin: 10px 0px 10px 0px;
color:#0066cc;
display: block;
}
 
/*チェックは隠す*/
.accbox input{
display: none;
}
 
/*中身を非表示にしておく*/
.accbox .accshow{
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
}
 
/*クリックで中身表示*/
.cssacc:checked + .accshow{
height: auto;
opacity: 1;
}
 
/* PC */
@media screen and (min-width: 960px) {
.pc{display:block;}
.tx{display:none;}
.ty{display:none;}
.sp{display:none;}
 
}
 
/* タブレット横長 */
@media all and (min-width: 768px) and (max-width: 960px) {
.pc{display:none;}
.tx{display:block;}
.ty{display:none;}
.sp{display:none;}
}
 
/* タブレット縦長 */
@media all and (min-width: 480px) and (max-width: 768px) {
*{
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
 
.pc{display:none;}
.tx{display:none;}
.ty{display:block;}
.sp{display:none;}
 
.sitetitle{
font-size: 150%;
font-weight: lighter;
text-align: center;
padding: 10px 0px 20px 0px;
}
 
}
 
/* スマートフォン 縦 */
@media all and (max-width: 480px) {
body{
font-size: 95%;
}
 
.pc{display:none;}
.tx{display:none;}
.ty{display:none;}
.sp{display:block;}
 
div.snippet{
margin: 3px 0px 3px 0px;
text-align:center;
}
 
#wrapper{
width:100%;
}
 
#main{
float: none;
margin: 0px 0px 0px 0px;
width:98%;
}
 
#sidebar{
float: none;
padding: 5px 1% 5px 1%;
margin: 30px 0px 0px 0px;
width:98%;
}
 
.categorycell{
margin: 30px 0px 0px 0px;
}
 
.categoryImg{
width: 130px; /* 領域の幅を指定 */
height: 100px; /* 領域の高さを指定 */
margin: 0px 10px 0px 10px;
float: left;
}
 
.honeycombCell{
width:32%;
height: 150px; 
}
 
.honeycombImg{
height: 103px;
}
 
.ninkiTop .honeycombCell{
width: 150px; 
}
 
.logo{
padding: 15px 10px 5px 10px;
font-size: 130%;
font-weight:bold;
}
 
h1{
font-size: 130%;
}
 
.pagination{
padding: 7px 12px 7px 12px;
}
 
.paginationLink a{
padding: 7px 12px 7px 12px;
}
 
.tableA{
 
}
 
.koushiki{
width:43%;
}
 
.shosai{
width:43%;
}
 
 
 
 
 
 
 
.imgC{
margin: 20px 0px 20px 0px;
width: 98%;
max-height: 300px; 
}
 
.imgD{
 
height: 500px; 
width:100%;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
#sidebar li{
margin: 5px 0px 0px 0px;
padding: 2px 2px 2px 0px;
}
 
div.mokuji{
width:80%;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
.mini_Ranking{
width:92%;
}
 
 
 
 
 
 
ol{
padding-left: 25px;
}
 
.ads{
 
 
width:100%;
}
 
 
 
 
 
 
 
 
 
 
iframe{
width: 100%;
height: 250px;
}
 
 
 
 
 
 
 
 
 
 
 
.imgD{
width:100%;
height: 200px; 
display: block;
float: none;
margin: 20px 0px 20px 0px;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.smaphoonly{
display:inline;
}
 
.notsmapho{
display:none;
}
}