/* ../devbox/css/style.css */

*{
    box-sizing:border-box;
    }

body{
margin:0;
}

/* list.html */

#base{
  background-color: #000;
  color: #FAFAFA;
}
a{
text-decoration:none;
color:#FAFAFA;
}
a:hover{font-weight: bold;}
#header{
padding-top:1%;
background-color:#00008b;
}
#top-nav{
background-color:#000;
border-top: 1px #FAFAFA solid;
border-bottom: 1px #FAFAFA solid;
}
.top-list{
color: #FAFAFA;
display:flex;
justify-content: space-around;
list-style-type: none;
padding:.5%;
margin:0;
}

.dev_title{
	font-size: larger;
	font-weight: bold;
  padding: 1% 0 1% 0;
	margin:0 5%;
}

.dev_desc{
  border-top:#FAFAFA solid 1px;
	margin:0 5%;
}

#main{
	color:#FAFAFA;
}

#footer{
justify-items: center;
color: #FAFAFA;
background-color:#00008b;
border-top:#FAFAFA solid 1px;
}


/* counter.html */

    #counter{
      background-color: #FAFAFA;
    }

    #counterarea{
      margin:1% 1% 1% 1%;
      display:grid;
      gap:1%; grid-template-columns:
      repeat(auto-fit,minmax(260px,1fr));
    }
    .counter{
      border:1px solid #000;
      border-radius:2cap;
      padding:4%;
      background:#fff;
      max-width:420px;
    }
    .counter-name{
      width:95%;
      padding:.5em;
      margin-bottom:8px;
      font-size:medium;
      border:1px solid #ccc;
      border-radius:4px;
    }
    .countnum{
      justify-self:center;
      border:1px solid #000;
      border-radius:2cap;
      background-color:#000;
      color:#FAFAFA;
      padding: 3% 15%;
      margin: 1% 0 2% 0;
      font-weight:bold;
      font-size:x-large;
      text-align:center;
    }
    .btnarea{ display:flex; gap:8px;
        justify-content:center;
    }
    .btnarea input{
      padding:3% 0;
      border-radius:2cap;
      color:#FAFAFA;
      background-color:#737373;
      border:solid #FAFAFA 2px; width:25%;
      cursor:pointer;
    }
    .btnarea input:hover{ background-color:#474747; }

    #plusbtn{
      position:fixed;
      right:12px;
      bottom:12px;
      display:inline-block;
      background-color: #000;
      color: #FAFAFA;
      border-radius:2cap;
      padding:12px 20px;
      cursor:pointer;
      user-select:none;
      font-weight:bold;
      font-size: large;
    }
    #plusbtn:hover{
    background-color:#474747;
    }

    #pageupbtn{
      display: none;
      position:fixed;
      left:12px;
      bottom:12px;
      background-color: #000;
      color: #FAFAFA;
      border-radius:2cap;
      padding:12px 20px;
      cursor:pointer;
      user-select:none;
      font-weight:bold;
    }

    #pageupbtn:hover{
    background-color:#474747;
    }



/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    body{
        display: grid;
    }
    .counter{
      border:1px solid #000;
      border-radius:2cap;
      padding:4%;
      background:#fff;
      max-width:100%;
    }

    #plusbtn{
        padding:16px 24px;
    }

    #pageupbtn{
        font-size: large;
        display: flex;
        padding:16px 24px;
    }

}