* {font-family:"Hiragino Kaku Gothic ProN",'Noto Sans JP',sans-serif;}
body{margin: 20px;}

.url{border: 1px solid #333;
  text-decoration: none;
  color: #333;
  padding: 3px 12px 4px;
  margin:0 4px 0 0;
  font-weight: normal;}
#root:hover{background-color: #db5461;
  transition: 0.3s;}

.title {text-align: center;
  margin: 30px 0 20px;}

.title a {font-size: 18px;
  border-bottom: 2px solid #333;
  padding: 3px 10px;
  font-weight: bold;}

#toptitle a{padding: 3px 30px;}

.title p{font-size: 10px;}

.toarchive{text-align: center;
  text-decoration: none;
  color: #333;
  margin: 30px;
  font-size: 15px;
  padding: 2px 10px;
  border: 1px solid #333;
  background-color: #fff;}

.toarchive:hover{background-color: #DB5461;
  transition: 0.3s;}

.boxA{width: 100%;
  height: 60px;
  background-color: #333;
  margin: 0;
  transition: 0.3s;}

.boxB:hover{opacity: 0.9;}

.boxA::after{content: "";
  		display: block;
  		clear: both;}

.boxA p{float:left;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  margin: 13px 20px 15px;}

.boxA img{ width: auto;
  float: right;
  margin: 7px ;
  height: 46px;}

.back{display:block;  width: 100%;  height:36vw; max-height: 230px;}

ul{margin: 0px;
  padding: 0;
  list-style:none;}


li{text-decoration: none;
  padding: 0;
  max-width: 490px;
  margin: 0 0 20px;
  margin-left: auto;
  margin-right: auto;}

@media(min-width: 700px){
  .title a {font-size: 25px;}

  .title p{font-size: 15px;}
  .toarchive{font-size: 20px;}

  .url{border: 2px solid #333;
    font-weight: bold;}
}

@media(min-width: 1040px){
  html, body{width:1000px;
    margin-left: auto;
    margin-right: auto;}
  .title {margin: 30px 0 30px;}

.themalist{display:block;margin-bottom: 20px;}

  .themalist::after{content: "";
  	display: block;
  	clear: both;}


li{float:left;
     width: 490px;
   margin: 0 5px 10px 5px;}
}