:root{
--deep:#cc1542;
--main:#ed2553;
--light:#dda0ff;
--text:#fff;
--text1:#ccc;
--text2:#e2e2e2;
--text3:#a5a6a3;
--link:#fff;
--link9:#000;
--rank:#ed2553;
--border:#eee;
--border2:#444;
--border3:#aaa;
--back:#040404;
--back1:#111617;
--back2:#2e2f31;
--back3:#333f49;
--back4:#434343;
--back5:#555050;
--back6:#6d6e6f;
--back7:#ccc;
--back9:#909ea5;
}


body{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
/* メイリオ, 'Hiragino Kaku Gothic Pro', Meiryo, 'ヒラギノ角ゴ Pro W3', 'MS PGothic', 'MS UI Gothic', Helvetica, Arial, sans-serif;*/
margin:0;
background:var(--back);
color:var(--text);
overflow-x:hidden;
}


body * {
box-sizing : border-box;
}


a{text-decoration:none;}

a,a:visited{color:var(--link);}

ul,li{margin:0;padding:0;list-style:none;}
p,div,nav{margin:0;padding:0;}



#content {
max-width: 800px;

margin: 0 auto;
}


.box {
margin-bottom:30px;
padding:5px 0;
background:var(--back2);
border-radius:3px;
color:var(--text);
}


@media (max-width: 600px) {
/* 横幅が320px以下の場合に適用するスタイル */

article{
padding:2px 2px;
}

h1{
margin:2px 2px 15px;
padding:2px 3px 5px;
font-size:18px;
color:var(--text);
border-bottom:1px solid var(--border2);
}

.log-box{
display:flex;
padding:10px 5px 10px 5px;
border-bottom:1px solid var(--border2);
font-size:12px;
}


.log-img-top{
width:130px;
}

.log-img-top img{width:120px;height:90px;}

.log-title span{
font-size:12px;
color:var(--text1);
}


.log-title b{
font-size:14px;
color:var(--text1);
}


.log-title i{
display:inline-block;
margin-left:10px;
padding:1px 5px;
color:#fff;
font-size:12px;
background:#a11;
border-radius:3px;
white-space: nowrap;
font-style:normal;
}



.item-box{font-size:14px;}

#head-box{
padding:5px;
text-align:center;
}

#head-title{
font-size:18px;
font-weight:bold;
}


details{margin:20px 0;}


}/* media */


@media (min-width: 601px) {

article{
padding:10px 10px;
}


h1{
margin:2px 2px 15px;
padding:2px 5px 5px;
font-size:21px;
color:var(--text);
border-bottom:1px solid var(--border2);
}

.log-box{
display:flex;
padding:10px 10px 10px 20px;
border-bottom:1px solid var(--border2);
}

.log-box:hover{
background:var(--back4);
}


.log-img-top{
width:150px;
}

.log-img-top img{width:140px;height:105px;}

.log-title span{
font-size:14px;
color:var(--text1);
}


.log-title b{
color:var(--text1);
}


.log-title i{
display:inline-block;
margin-left:10px;
padding:1px 7px;
color:#fff;
font-size:13px;
background:#a11;
border-radius:3px;
white-space: nowrap;
font-style:normal;
}







img:hover {
opacity: 0.7;
}

#head-box{
padding:5px 5px 5px 10px;
}


#head-title{
font-size:24px;
font-weight:bold;
}


details{margin:20px 30px;}


}/* media */



.text{
padding:10px 5px 30px;
color:var(--text1);
}

.text b{color:var(--text);}


.intro-box {
position: relative;
margin: 2em 2px 50px;
padding: 0.5em 1em;
border: solid 3px var(--back5);
}

.intro-box .intro-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: var(--back5);
color: #ffffff;
border-radius: 5px 5px 0 0;
}

.intro-box p {
color:var(--text1);
font-size:14px;
}



.intro{
color:var(--text2);
margin:20px 30px 50px;

}



.res i {
display: inline-block;
margin-right: 6px;
margin-bottom:6px;
padding: 0px 10px;
font-style:normal;
color: var(--text);
border-radius: 3px;
background: var(--back3);
}

.res i:hover{
background:var(--main);
}

.act_space{
margin-top:15px;
}



.frame{
margin:10px 2px 30px;
text-align:center;
}

.frame img{
max-width:100%;
}


.item-box{
max-width:740px;
margin:0 auto;
}

.item-title{
margin-bottom:20px;
font-size:18px;
font-weight:bold;
color:var(--text);
}

.item{display:flex;
padding-bottom:5px;}

.label{
}

.label span {
white-space: nowrap;
background:var(--back5);
padding:3px 8px;
border-radius:2px;
color:var(--text9);
}

.res{
padding:1px 2px 3px 8px;
}

.res b{
display:inline-block;
margin-left:10px;
padding:2px 10px;
color:#fff;
font-size:14px;
background:#a11;
border-radius:3px;
white-space: nowrap;
}

.res span {
color:#f00;
}

del{color:#999;font-size:0.93em;}



.log-h1{
font-size:18px;
border-bottom:1px solid var(--border2);
padding:2px 5px 4px;
}





.log-img{
width:110px;
}

.log-title{
flex:1;
}


.rank-bar{
display:flex;
background:var(--back);
margin-top:20px;
margin-bottom:5px;
padding:5px;
color:var(--link);
}

.rank-bar a{
color:var(--link);
}

.rank-title{
padding-left:2px;
}

.rank-title span{

font-size:15px;
vertical-align:top;
}


.rank-link{
margin-left:auto;
padding-right:5px;
font-size:12px;
}
.rank-link a{

vertical-align:middle;
}

.rank-link a:hover{
text-decoration:underline;
}


.sp-rank {
display: flex;
width:100%;
overflow-x: auto;
scrollbar-width: none; 
}

.rank{
display: flex;
background:(--back4);
padding:10px 0;
}

.list {
width:150px;
margin:0 5px;
text-align:center;
}


.list a:hover{
text-decoration:underline;
}


.list img{padding:0 10px;}


.list img.list-top{width:140px;height:105px;padding:0;}


.list p { font-size:12px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.num{
width:35px;
font-size:12px;
margin:5px auto 15px;
text-align:center;
border:1px solid var(--text1);
}


.space{padding-top:20px;}


.ranking{
margin:10px 5px 20px;
color:var(--rank);
font-weight:bold;
font-size:18px;
}

.ranking span{font-size:15px;}

/* header */

nav a, nav a:visited{
color:var(--link);
text-decoration:none;
}

header a:hover{
text-decoration:underline;
}

header {
margin-bottom:50px;
background:var(--back);
}


#head-title a{color:var(--link);}

/* head nav */
nav {
display: flex;
align-items: center;
width:100%;
font-size:14px;
background:var(--back3);
overflow-x: auto;
scrollbar-width: none; 
}

.header-list {
display: flex;
justify-content: center;
align-items: center;
}

header li{
padding:5px 10px;
white-space: nowrap;
}

.header-link {
color: ver(--link2);
text-decoration: none;
}


/* footer */
footer {
margin: 50px 0 0;
text-align: center;
background: var(--back3);
padding-top: 20px;
padding-bottom: 20px;
color: var(--text9);
font-size: 13px;
}

footer a, footer a:visited{
color:var(--link9);
text-decoration:none;
}

footer a:hover{
text-decoration:underline;
}

.home {margin:50px 20px;padding:6px 3px;}

.home a{
display:block;
text-align:center;
background:var(--back4);
border-radius:4px;
line-height:2;
color:var(--text);
}

.home a:hover{
background:var(--back5);

}

.push{
margin:10px 20px;
padding:10px;
background:var(--main);
text-align:center;
color:var(--text9);
border-radius:8px;
font-weight:bold;
}

.push:hover{
background:var(--deep);
}


.credit{text-align:center;margin:40px 0px 20px;}


#page-box{
margin:20px 5px;
text-align:center;
}

a.btn {
display: inline-block;
margin-right: 10px;
background: var(--back6);
padding: 10px 20px;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
text-decoration: none;
color: var(--text);
}

a.btn:hover{
background:var(--main);
}


summary {
padding:5px 3px;
text-align:center;
cursor: pointer;
display: block;
background:var(--back);
}


.set_img 
{
display:inline-block;
margin:10px 0 20px;
max-width:100%;
}

details div{text-align:center;}